Need Help creating Widget

[icebear (Holger S)]

Hello everybody

This is my first post here, because i’am new to openhab and not so familiar with html and ccs .
I hope this is the right category in the forum where i post this, if not sorry

I need a little help to create the output for a widget like this

what i have is this

and the code for my widget is this

<div  class="row">
      <div class="col-sm-3">
        <br />
        <img src="../static/custom_icons/temp_aussen1.png" height="50pt"/>
        <br />
      </div>
<div  class="row">
        <div class="col-sm-5">
        <span style="font-size: 10pt">Max. heute</span><span style="font-size: 12pt">{{itemValue('Wetter_ForecastToday_Maxtemperature') | number:1}}</span>
        <br />
<div  class="row">
        <span style="font-size: 10pt">Max. morgen</span>
        <span style="font-size: 12pt">{{itemValue('Wetter_ForecastTomorrow_Maxtemperature') | number:1}}</span>
        <br />
<div  class="row">
        <span style="font-size: 10pt">Min. vergangene Nacht</span>
        <span style="color:blue;font-size: 14pt">{{itemValue('Wetter_ForecastToday_Mintemperature') | number:1}}</span>
        <br />
<div  class="row">
        <span style="font-size: 10pt">Min. kommende Nacht</span>
        <span style="color:blue;font-size: 14pt">{{itemValue('Wetter_ForecastTomorrow_Mintemperature') | number:1}}</span>
        <br />
      </div>
</div>

My problem is that i dont know how i have to code it to get lines between the text and that text is orientated right and the temperatures orientaed left (like in the first picture.
The second is that the picture in HABPanel looks o.k. but when it is displayed on the Tablet it is komplet left orientated (like in the second picture)
Hope sombody can help me with a little explain how to fix this

Sorry for my bad english

Holger