title: Vertically Center Two Side-By-Side Text Columns of Different Heights
body: <p>Hello i am trying to get something like this,
  <img src="https://i.stack.imgur.com/fxx3r.png" alt=""></p>
  
  <p><strong>UPDATED:</strong>
  Pic Explanation:
  The two single cut lines must be of equal length and the double cut lines must be equal too. The distance between both text columns should be related to the center for the sake of bigger screens.</p>
  
  <p>I tried using the following code to achieve this, but it is producing issues when the screen size changes.</p>
  
  <pre><code>&lt;div style="width: 100%; height: 100%; background: none repeat scroll 0% 0% aqua; margin: 0px; padding: 0px;"&gt;
  &lt;div style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);"&gt;
    &lt;div style="float: left; padding-right: 10%;"&gt;Some Text Long&lt;/div&gt;
    &lt;div style="float: right; padding-left: 10%; border-left: 1px solid red;"&gt;Some other long text&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>