JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='subcontainer'>
        <div class='first'>I want this to fill almost 45% of the width of the screen</div>
        <div class='second'>I want this to fill almost 45% of the width of the screen</div>
    </div>
</div>

CSS

.container {
    margin-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.25rem;
    width: 90%;
    border:2px solid;
    background:yellow;
}
.subcontainer {
    display: table-row;
    width: 100%;
}
.first {
    width: 50%;
    height: 20px;
    background-color: green;
    display:table-cell
    
}
.second {
    width: 50%;
    height: 20px;
    background-color: red;
    display:table-cell
}