-3

I am new to HTML/CSS, I am trying to achieve a particular scenario:

  1. A container div (parent) has two child divs, first for label and second for content.
  2. Parent div (container) width should depend of second child (content) width, i.e. if the second child width increased due to its content, Parent div width should also be increased. (Parent div width = second child width).
  3. First child is used for label, so it should not exceed Parent div width. If First child is larger than Parent div width, it should show text as ellipsis. Parent div width should not depend on first child width.

I am not sure if it can be achieved using only CSS. Would really appreciate your help with this.

Thanks in advance.

Image for visual representation

Usual Guy
  • 3
  • 1

2 Answers2

1

Implemented using flex in CSS. Working demo can be found here. 'https://codepen.io/shrdz_yadav/pen/rNLNPQE'

Shraddha Yadav
  • 132
  • 1
  • 7
0

For the container to use the content as a width reference it's possible and it's called "shrinkwrapping" visit this thread for more detail.
For the label div, you can use this CSS property.
So the answer to your question, yes it's possible.

Oussama Bouthouri
  • 615
  • 2
  • 8
  • 23