Can i put UI_template widgets side by side?

[Henrique]

i want to put some widgets side by side like this

in this html example i used the inline-block in css but how i do this on ui_template? already tried doing the same script `
div{
display:inline-block;
}

Molde1 Peso Corpo
<div id='mpc1' ng-bind-html="msg.payload[0]"></div><br>
Molde1 Peso Ombro
<div id='mpo1' ng-bind-html="msg.payload[1]"></div><br>
Molde1 peso Base
<div id='mpb1' ng-bind-html="msg.payload[2]"></div><br><br>

molde2 Peso Corpo
<div id='mpc2' ng-bind-html="msg.payload[3]"></div><br>
molde2 Peso Ombro
<div id='mpo2' ng-bind-html="msg.payload[4]"></div><br>
molde2 peso Base
<div id='mpb2' ng-bind-html="msg.payload[5]"></div><br><br>

`

but still is in one row

[zenofmud]

What have you got the group width set to in the ui-template configuration?

1. open the ui-template node
2. click the pencil icon to the right of the 'group' option
3. what is the width set to?

The width will be the space that the ui-nodes will fit in.

[E1cid]

To display the second set of div's to the right you can use css. There are a few methods for this, search display html elements inline css
e.g.

<style>
.float-child {
    margin: auto;
    width: 50%;
    float: left;
}  
</style>
<div>
  <div  class="float-child">
    <div id='mpc1'>Molde1 Peso Corpo {{msg.payload[0]}}</div>
    <div id='mpo1'>Molde1 Peso Ombro {{msg.payload[1]}}</div>
    <div id='mpb1'>Molde1 peso Base {{msg.payload[2]}}</div>
  </div>
  <div  class="float-child">
    <div id='mpc1'>Molde2 Peso Corpo {{msg.payload[3]}}</div>
    <div id='mpo1'>Molde2 Peso Ombro {{msg.payload[4]}}</div>
    <div id='mpb1'>Molde2 peso Base {{msg.payload[5]}}</div>
  </div>
</div>