JSFiddle - React, Tailwind, and code Playground
HTML
<div id="extensions" class="extensions">
<div class="extensions row">
<div class="extensions row icon">icon</div>
<div class="extensions row details">
<div class="extensions row name">Name: Some Name</div>
<div class="extensions row desc" style="">Description: Some description blah blah blah.</div>
</div>
</div>
</div>
CSS
.extensions {
font-family: sans-serif;
font-size: 95%;
width: 100%;
height: 50%
}
.extensions .row {
margin: 5px;
border: 1px solid red;
width: 100%;
}
.extensions .row .icon {
display: inline-block;
border: 1px solid green;
width: 10%;
}
.extensions .row .details {
display: inline-block;
width: 50%;
}
.extensions .row .details .name {
border: 1px solid orange;
width: 70%;
}
.extensions .row .details .desc {
border: 1px solid purple;
width:70%
}