Keeping floats on one line

HTML

<div class="parent">
<div class="child-left">
  child-left
</div>
<div class="child-right">
  child-right
</div>
</div>

CSS

.parent {
     white-space: nowrap;
     width:400px;
}

.child-left {
    background-color: orange;
    display:inline-block;
}

.child-right {
    background-color: yellow;
    display:inline-block;
    white-space: normal;
    width: 400px;
}