Need help with Template - formating 2 items in one line

[juntiedt]

<div>
    <center>
        <br>
        <font size="2">Motor</font>
        <div style="color:{{msg.payload}}">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    </center>
</div>

I am not familiar with html or css.
How can I format it, that "motor" and the circle are in one line in a 2x1 field.
Motor should be in white and msg.payload delivers red or grey.

[TotallyInformation]

Hi, I'm afraid that your HTML is a decade out of date!

<div> will always start a new para by default. <center> and <font> really aren't used any more and you should use CSS style attributes instead. <br> is giving you an extra blank line and is unnecessary, if you want to have more space above the first content in your outer div, again use CSS style on the div with padding-top: 1em; or similar.

To directly answer your question, you should replace the <font> and inner <div> both with <span> which doesn't throw a new para.

[juntiedt]

Hi, thanks a lot! Yes you are right what concerns my HTML knowledge
That code works now

<div padding-top: 10%;>
    <span font size="2">
        Motor&nbsp;&nbsp;&nbsp;
    </span>
    <span style="color:{{msg.payload}}">
        <i class="fa fa-circle" aria-hidden="true"></i>
    </span>
</div>

but padding is still a problem.
I want to align it with a text field left of it. please see picture.

Why does padding not work?

[TotallyInformation]

Not sure, I'd have to play with it - bear in mind that I'm an amateur not a CSS pro. I'm afraid that I'm about to go out for a couple of days so won't be able to respond.

If you really want things to line up no matter what, use a table or look at the grid feature of modern CSS.

Oh, and get rid of those non-breaking spaces - this isn't Microsoft Word!

[bakman2]

<div padding-top: 10%;>

should be in a style attribute:

<div style="padding-top: 10%">

[juntiedt]

Hi bakman2,
thanks, it does the job