Two divs in the same line, how to stretch the first div with 100% width when second not shown with css

Question

I have two divs in one div. div1 will be shown in all cases. But div2 might or might not shown depends on some condition. div1 and div2 are in the same line if div2 is shown, and the width of div2 is 160px. When div2 is not shown, I want div1 to take over 100% width of the line. When div2 is shown, I want div1 to take over the rest of the line and div2 to have width of 160px. How can I achieve this using CSS ?

Assume the html is

<div className="outer">
  <div className="div1">content of div1</div>
  <div className="div2">content of div2</div>
</div>

Could you share your design? You might be approaching this from wrong angle. — shutupchigo, May 09 '20 at 01:28

score 0 · Answer 1 · answered May 09 '20 at 01:45

You can do it like this:

<div class="outer">
    <div class="div1">content of div1</div>
    <div class="div2">content of div2</div>
</div>

<style>
    .outer {
        display: flex;
        width: 100%;
    }
    .outer .div1 {
        width: 100%;
    }
    .outer .div2 {
        width: 160px;
    }
</style>

please note to prefix your css to make it work on all browsers like IE and Safari...

Two divs in the same line, how to stretch the first div with 100% width when second not shown with css

1 Answers1