How to make the juxtaposed div highly adaptive

<div>

<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>

</div>

the figure is as follows:

I am currently writing based on the table property of display.
but cannot set the width.

Less html css html5

Mar.13,2021

 .c-box{
            width: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        .c-left{
            background: -sharpccc;
        }
        .c-right{
            background: -sharpf3f3f3;
        }
        .c-left,.c-right{
            margin-bottom: -9999px;
            padding-bottom: 9999px;
            width: 200px;
            float: left;
        }
     <div class="c-box">
        <div class="c-left">
            fdsfdsf
            fdsfdsf
            fdsfdsf
            fdsfdsf
            fdsfdsf
        </div>
        <div class="c-right">
            fsdfsdf
        </div>
    </div>

Zhang Xinxu's great method compatibility is very good. You can try it

you can try to divide the card into two layers, the bottom of which contains a red border. Make use of the two features of absolute to keep it at the bottom (do not declare that left will default to static position , and let the parent element position keep static so that it does not act as position container).

Proof of concept ideas for reference:

https://codepen.io/straybugs/.

use the flex layout

to set a percentage of the height of the div inside to adapt to the height of the parent element.

Previous: How to achieve this tilted stripe effect with css or js?

Next: Vue calls variables defined in index