title: Image and separator positioning
body: <p>I have a problem in my weather webapp.</p>
  
  <p>As you can see on the screenshot below, if the width of the device is low, the forecast is displayed correctly, but if you browse the page on a desktop or on an ipad, the images don't stay on the left.</p>
  
  <p>High width screen</p>
  
  <p><img src="https://i.stack.imgur.com/YVn7m.png" alt="enter image description here"></p>
  
  <p>Small width screen</p>
  
  <p><img src="https://i.stack.imgur.com/LRWDY.png" alt="enter image description here"></p>
  
  <p>This is the code of one single day:</p>
  
  <pre><code>echo '&lt;div class="line-separator"&gt;&lt;/div&gt;';
  echo '&lt;img class="small_img_meteo" src="images/' .$img1 . '.png"/&gt;';
  echo '&lt;p&gt;'.$name1.'&lt;br /&gt;' .$condizione_txt1. '&lt;/p&gt;';
  echo '&amp;nbsp'; 
  </code></pre>
  
  <p>And here is the stylesheet</p>
  
  <pre><code>.small_img_meteo{
  position:relative;
  float:left;
  width:20%;
  }
  
  .line-separator{
  
  height:1px;
  
  background:#FFFFFF;
  
  border-bottom:1px solid #717171;
  
  }
  </code></pre>
  
  <p>Unfortunately, <strong>I can't use vw size</strong> for the fonts  </p>
  
  <p>So, is there a way to put the line-separator just at the end of the image ( because they actually overlay the images, and they just care about the end of the text), or else to fix the images to the left</p>