Floating table-cell right removes height
<p>I have table with 3 cells <code>|information| |two lines| |empty|</code> and second row <code>|empty| |two lines| |information|</code> and my media query changes those two to</p>

<pre><code>|information||two lines|
|informatino||two lines|
</code></pre>

<p>The problem is with two lines they dissapear as soon as I float that div right <code>.verticalLine</code></p>

<p>Here is jsfiddle showing the problem <a href="https://jsfiddle.net/fh6unb7q/" rel="nofollow">https://jsfiddle.net/fh6unb7q/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.side {
  width: 45%;
}
.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}
.verticalLine {
  position: relative;
  width: 10%;
}
.tr {
  display: table-row;
}
.tc {
  display: table-cell;
}
.year {
  text-align: center;
  color: #607D8B;
}
/* Media Queries */

@media only screen and (max-width: 768px) {
  header h1 {
    font-size: 3rem;
  }
  .tr &gt; div.side {
    display: none;
  }
  .tr &gt; div.verticalLine {
    float: right;
  }
  .tr &gt; div.year {
    float: right;
  }
  .tr &gt; a {
    float: left;
  }
  .side {
    width: 90%;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display: table;"&gt;
  &lt;div class="tr"&gt;
    &lt;a class="tc side" target="_blank" href="#"&gt;
      &lt;h3&gt;test test test test test test test test test test test test test &lt;/h3&gt;
    &lt;/a&gt;
    &lt;div class="tc verticalLine"&gt;
    &lt;/div&gt;
    &lt;div class="tc side"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="tr"&gt;
    &lt;div class="tc side"&gt;&lt;/div&gt;
    &lt;div class="tc verticalLine"&gt;
    &lt;/div&gt;
    &lt;a class="tc side" target="_blank" href="#"&gt;
      &lt;h3&gt;test test test test test test test test test test test test test &lt;/h3&gt;
    &lt;/a&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>EDIT : Code updated using flex</strong> - <a href="https://jsfiddle.net/fh6unb7q/1/" rel="nofollow">https://jsfiddle.net/fh6unb7q/1/</a>
HTML:</p>

<pre><code>&lt;div style="display: flex;"&gt;
    &lt;a class="side" target="_blank" href="#"&gt;
      &lt;h3&gt;test test test test test test test test test test test test test &lt;/h3&gt;
    &lt;/a&gt;
    &lt;div class="verticalLine"&gt;
    &lt;/div&gt;
    &lt;div class="side"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div style="display:flex"&gt;
    &lt;div class="side"&gt;&lt;/div&gt;
    &lt;div class="verticalLine"&gt;
    &lt;/div&gt;
    &lt;a class="side" target="_blank" href="#"&gt;
      &lt;h3&gt;test test test test test test test test test test test test test &lt;/h3&gt;
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.side {
  width: 45%;
}

.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}

.verticalLine {
  position: relative;
  width: 10%;
}



/* Media Queries */

@media only screen and (max-width: 768px) {
  div.side {
    display: none;
  }
  div.verticalLine {
    float: right;
  }

  a {
    float: left;
  }
  .side {
    width: 90%;
  }
}
</code></pre>

<p>As you can see still it is not aligned properly although || are still visible after media query is executed.</p>

<p>I would want it to be aligned like so</p>

<pre><code>|information||two lines|
|informatino||two lines|
</code></pre>