Layout With Border Box

border-box simplifies layout calculations.

Preview

Code

<style>
.container{
display:flex;
gap:10px;
}

.box{
flex:1;
padding:20px;
border:4px solid #2563eb;
box-sizing:border-box;
background:#e5e7eb;
}
</style>

<div class="container">
<div class="box">Column</div>
<div class="box">Column</div>
</div>

More CSS Box Sizing Examples (8)