Inner divs in one line. inner left is dynamic

Question

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Inner divs in one line. inner left is dynamic

Sign up