How can I make one div in a parent container define the width while forcing the other to wrap? While I'm open to solutions that involve tables or JavaScript, I'm not particularly enthusiastic about them.
Here is the HTML structure:
<div class="parent">
<div class="header">This content should not wrap</div>
<div class="text">This text should wrap based on the header's width without affecting the parent container.</div>
</div>
And here is the CSS:
.parent {
display: inline-block;
border-style: solid;
border-width: 1px;
}
.header {
white-space:nowrap;
}
.text {
/* Looking for a solution here */
}
You can view a demo of this setup on jsfiddle.