I am facing an issue with two divs that look good on the same line when utilizing display: inline-block. However, if one of the containers contains an excessively long word that I attempt to wrap using overflow-wrap and word-break, it causes the container to move to the next line, which is something I want to prevent.
div {
display: inline-block;
}
div.bar {
overflow-wrap: break-word;
word-break: break-all;
}<div>foo</div>
<div class="bar">
barbarbarbarbarbarbarbar...
</div>Check out the example on JSFiddle
What I am aiming for is this
foobarbarbarbarbarbarbarbarbarbar...
...barbarbarbarbarbarbarbarbarbarbar...