0

I would like to lay out two divs horizontally

parent div width=500px
- left div: shall grow horizontally to fit to contents (not more or less)
- right div: shall grow horizontally and take up all the space to the right edge

How can I achieve this?

Paul
  • 2,474
  • 7
  • 33
  • 48
  • Not a duplicate as the suggested duplicate requires a fixed width div and a expanding div while this question asks for two growing divs where the first one grows to content and the other one to available space. – Paul Jun 18 '17 at 15:04

1 Answers1

0

Using flex and flex-grow

div {
display: flex;
width: 500px;
}
.grow {
flex-grow: 1;
background: #eee;
}
<div>
  <span>content</span>
  <span class="grow">grow</span>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64