# Need help with Template - formating 2 items in one line

**URL:** https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499
**Category:** Dashboard
**Created:** [29 March 2022 15:14 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499 "2022-03-29T15:14:47Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)
#### Post date: [29 March 2022 15:14 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/1 "2022-03-29T15:14:47Z")

</div>

```auto
<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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [29 March 2022 20:14 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/2 "2022-03-29T20:14:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)
#### Post date: [30 March 2022 08:28 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/3 "2022-03-30T08:28:36Z")

</div>

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

```auto
<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.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/48731b1a0a8662f21f830e1dd86386af3de95818.png)  
Why does padding not work?

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 March 2022 08:31 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/4 "2022-03-30T08:31:26Z")

</div>

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! 🙂

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [30 March 2022 10:26 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/5 "2022-03-30T10:26:27Z")

</div>

> `<div padding-top: 10%;>`

should be in a style attribute:

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

```

---

<div class="post-metadata">

### Author: ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)
#### Post date: [30 March 2022 10:59 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/6 "2022-03-30T10:59:05Z")

</div>

Hi bakman2,  
thanks, it does the job 👍

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [13 April 2022 10:59 UTC](https://discourse.nodered.org/t/need-help-with-template-formating-2-items-in-one-line/60499/7 "2022-04-13T10:59:40Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.