width calc - positioning alternative

by ian_smithz

HTML

<div class="parent clearfix">
    <div class="child1">child 1</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent clearfix">
    <div class="child1">child 1<br/>very long content child 1<br/>very long contentchild 1<br/>very long contentchild 1<br/>very long content</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent clearfix">
    <div class="child1">child 1</div>
    <div class="child2">child 2<br/>very long content</div>
</div>

CSS

.parent {
    position: relative;
    width: 100%;
    border: 1px solid black;
}
.child1 {
    width: calc(100% - 160px);
    background-color: #DDDDDD;
    float: right;
}
.child2 {
    width: 145px;
    background-color: #DDDDDD;
    float: left;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}