JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainPanel">
<div id="inbox">
<a>
<span id="fromSubject">Test</span>
<span id="fromSubject">TEst</span>
<span id="date">Test</span>
</a>
</div>
</div>

CSS

#mainPanel #inbox a #fromSubject {
display: inline-block;
width: 173px;
text-align:left;
padding-left: 4px;
}

#mainPanel #inbox a #date {
display:inline-block;
width:173px;
text-align: left;
padding-left: 4px;
}

#mainPanel #inbox a {
font-weight:normal;
text-decoration:none;
color:#000000;
display:inline-block;
font-size:11px;
line-height: 16px;
}

#mainPanel #inbox a #unreadInbox {
font-weight:bold;
color:#165E8A;
}

#mainPanel #inbox a:hover { 
background:#B0DFF2; 
}