How to set automatic width of DIV and dynamically change the width when the browser window is reduced?

Question

css

There is such a page.
We want the red DIV to be 200px and the green to the rest of the width. Both DIVs in one row.
Here is the code:

<div class="wrapper">
    <div class="content left">
        <div>asd
    </div>
    </div>
    <div class="content right">
        <div>asd
    </div>
    </div>
</div>

.wrapper {
    text-align: center;
  width:100%;
  background:blue;
  vertical-align:top;
}

.left {
width:200px;
display:block;
background:red;
height:200px;
}

.right {
width:80%; 
display:block;
background:lime;
height:200px;
}

@media (min-width: 500px) {
    .content {
        display: inline-block;
    }

}

It works more or less, but I myself entered the width in% of the bullshit. How can I make it stretch to full width?
Also, when narrowing the browser to 500px, they become on top of each other, BUT .left remains 200px and .right again remains 80% , and you need to stretch them to full width.
I tried like this:

.wrapper {
    text-align: center;
  width:100%;
  background:blue;
  vertical-align:top;
}


.left {
width:200px;
display:block;
background:red;
height:200px;
}

.right {
width:80%;
display:block;
background:lime;
height:200px;
}






@media (min-width: 500px) {
    .content {
        display: inline-block;
    }
  
  .left {
  width:100%;
  }
  
  .right {
  width:100%;
  }
  
  
  
}

But then 100% width is accepted for some reason immediately, even before the browser is narrowed.

Answer 1

vertical-align:top; you can remove it, it doesn’t work for block elements anyway,
and if there is a width, don’t automatically specify it at all, the block will stretch to full screen and of course it will shrink
, you can set a common margin: 20px; for example, it will be completely 20px sides, but it can collapse on top
https://codepen.io/topicstarter/pen/Ldzjpy