set a divs besdie each other in a table reactjs - css

Question

Im building a website that is like an airport booking's website
it has this table
i don't know how can I style it as shown in the photo
this is what I did
<div className="section>">
<div className="content">
<div className="container">
<div className="row">
<div className="planner">
<form>
<div className="checkbox">
<div className="row">
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'den Gönder
</label>
</div>
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={!checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'ye Getir
</label>
</div>
<div className="form">
<div className="row">
<label htmlFor="">Kurye Taşıması</label>
<label> Nereye</label>
</div>
<div className="row">
<select>
<option value="">Almanya</option>
<option value=""></option>
</select>
</div>
<div className="labels">
<div className="inputs">
<label>AĞRILIK</label>
<input type="weight" placeholder="KG" />
<label>UZUNLUK</label>
<input type="height" placeholder="CM" />
<label>CENSLIK</label>
<input type="height" placeholder="CM" />
<label> YUKSELIK</label>
<input type="height" placeholder="CM" />
</div>
</div>
<div className="row">
<div className="total">
<h2>ODENECEK TUTAR</h2>
</div>
<button>DEVAM ET</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
and this is the CSS file
.checkbox{
margin: 0px 5px 0px 0px;
padding: 10px;
align-items: center;
justify-content: center;
}
.checkbox-round {
display: inline-block;
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
body{
overflow: hidden;
background-color: #2a3541 !important;
}
.dot{
color: rgb(236, 5, 5);
}
.container{
max-width: 100%;
margin: 0;
padding: 0;
background-color: #2a3541;
} .planner{
margin: 22px 200px 20px 20px !important;
border:2px #ddd;
border-radius:10px;
background-color: #f1f1f1;
padding: 1rem;
margin: 0;
max-width: 100%;
}
.row{
float: right;
width: 40%;
display: inline-flex;
flex-direction: row;
}
.inputs{
display: inline;
max-height:100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #f1f1f1;
border-radius: 10px;
color: #2a3541;
}
.labels{
display: block;
}
div label{
display:block;
}
so basically, what I can't figure out is how to put the inputs beside each other just like the given photo with saving the positions of other divs