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,354
  • 5
  • 31
  • 46
  • 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
  • 50,703
  • 5
  • 56
  • 56