Is there a way to set the min-width on a contenteditable div while keeping other elements inline with it?
I have looked at solutions that use inline-block, but I am unable to use this behavior. When inline-block wraps, it still acts like a block element, whereas I need the div to act as an inline element. It seems like achieving this may require more than just CSS, as it is difficult to detect when the text in the div changes. Any solution involving javascript and/or jQuery would be appreciated.
EDIT: To simplify my question, if the user types more text than fits on the page width, the behavior of inline-block vs block results in differences that concern me.
<style type="text/css">
label {
width: 40px;
height: 40px;
}
#container {
font-size: 32px;
}
#content {
display: inline;
min-height: 37px; /* does not apply to inline elements */
min-width: 80px; /* also does not work on inline elements */
}
</style>
<div id="container">
<input type="radio" />
<label>
<span></span>
</label>
<span>(A)</span>
<div id="content" contenteditable="true" unselectable="off">test</div>
</div>