Как сделать div таким же широким, как его брат, но не шире?

Question

У меня есть следующий HTML:

<div class="wrapper">
  <div class="label">
    foor bar baz
  </div>
  <img src="...">
</div>

Да, я знаю, что div с классом "label" должен быть меткой.

Простой вопрос: как сделать так, чтобы метка всегда была такой же широкой, как изображение, и никогда не шире? Ширина рисунка и содержание этикетки неизвестны. Если содержимое метки длиннее ширины изображения, оно должно перейти к следующей строке.

Прямо сейчас у меня есть "display: inline-block" для оболочки, и все выглядит нормально, когда текст помещается на этикетке. Когда текст длиннее, он, тем не менее, не ломается, но делает ярлык длиннее изображения.

Я думаю, есть простое решение для этого, но я просто не вижу его. Любая помощь приветствуется!

Answer 1

элемент не может быть больше, чем его родитель, поэтому, если вы поместите тег img в div, он никогда не будет больше.

<div class="wrapper">
  <div class="label">
    foor bar baz
    <img src="...">
  </div>
</div>

Answer 2

Дайте обоим элементам атрибут width:50%; (или width: 49%; на всякий случай), который должен помочь.