float - issue

HTML

<div class="container">
<div class="vert-text"><strong>TRAX</strong></div>
<div class="info"><strong>A1.</strong> Activator (Untitled Mix 1)<br>
<strong>B1.</strong> Activator (Untitled Mix 2)<br>
<strong>B2.</strong> Activator (Untitled Mix 3)<br></div>
</div>
<div class="container">
<div class="vert-text"><strong>DATA</strong></div>
<div class="info"><strong>Label:</strong> Vicious Muzik Records<br>
<strong>Released:</strong> 1994<br>
<strong>Condition:</strong> VG+ to NM-<br></div>
</div>

CSS

.container {
  float: left;
  position: relative;
  padding-right: 10px;
  overflow: hidden;
  background-color: red;
}

.vert-text {
  float: left;
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
  background-color: black;
  color: white;
  margin-right: 5px;
  padding: 5px;
  height: 100%;

}

.info {
  position: relative;
  white-space: nowrap;
  display: flow-root;
}