Flexing the Box

by Robert Herring

HTML

<div class="line">
    <div class="left">
        something 2 something 3 something 4
    </div>
    <div class="right">
        something 5 something 5 something 6
    </div>
</div>
<div class="line">
    <div class="left">
        something 2 something 3 something 4 something 4 
    </div>
    <div class="right">
        something 5 something 5 something 6
    </div>
</div>
<div class="line">
    <div class="left">
        something 2 something 3 something 4 something 4 something 4  
    </div>
    <div class="right">
        something 5 something 5 something 6
    </div>
</div>
<div class="middle"></div>

CSS

* {
    padding:0;
    margin:0;
}
.line{
    display: flex;
    /* flex-flow: row wrap; */
    height: 50px;
    border-top:1px solid lightgray;
    border-bottom:1px solid lightgray;
}
.left, .right{
    /* margin: auto; */
    flex: 1 auto;
    text-overflow: ellipsis;
    background: rgba(0,200,0,0.1);
    border-left:1px solid lightgray;
    border-right:1px solid lightgray;
    overflow: hidden;
    white-space: nowrap;
}
.right{
    text-align: right;
    background: rgba(0,0,200,0.1);
}
.middle{
  position: absolute;
  top:0;
  width:50%;
  height: 100%;
  border-right:2px dotted red;
}