title: Responsive HTML + CSS custom break line - IMAGE
body: <p>I've been trying to write a code for this for some time but with no success.</p>
  
  <p>What I want to accomplish:</p>
  
  <p><img src="https://i.stack.imgur.com/G1iMj.jpg" alt="large screens"></p>
  
  <p>This part isn't hard to do static, but responsive concept gives me nuts.</p>
  
  <p>How should look on small screens:</p>
  
  <p><img src="https://i.stack.imgur.com/ykabl.jpg" alt="Small screens display"></p>
  
  <p>How it looks now:</p>
  
  <p><img src="https://i.stack.imgur.com/B5ir3.jpg" alt="enter image description here"></p>
  
  <p>Like you see, When I start to resize my window it all start good , but then, in one point the right line go to a new line.</p>
  
  <p><strong>Fiddle:</strong></p>
  
  <p>I made an example of this on Fiddle : <a href="http://jsfiddle.net/Gbcfs/8/" rel="nofollow noreferrer">http://jsfiddle.net/Gbcfs/8/</a></p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;style&gt;
  .line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 2px; float:left; min-width:2px;}
   h2 {float:left;}
   &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="line"&gt;&lt;/div&gt;
  &lt;h2&gt;How it works&lt;/h2&gt;
  &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>