user636312 user636312 - 4 years ago 97
CSS Question

Inner divs in one line. inner left is dynamic

I have the following HTML:

<div id="container"><div id="textOnLeft">{{someDynamicText}}</div><div id="btnOnRight"><button></button></div></div>


The button should be always to the right of the dynamic text.
Case the width of the text + width of the button are over the width of the container - the text should be ellipsis.

Please you guidance.

Thanks,
Ampo.

Answer Source

You're not going to get an ellipsis unless you set a certain width limit on textOnLeft. The rest is the magic of flexbox.

#container{
  display: flex;
  flex-direction: row;
}
<div id="container">
  <div id="textOnLeft">{{someDynamicText}}</div>
  <div id="btnOnRight">
    <button></button>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download