After receiving guidance from stackoverflow, I created this HTML and CSS structure. However, the small text on the right is appearing vertically positioned at the top of the larger font above it. Despite trying different solutions, I haven't been able to fix this issue yet. Any suggestions would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="a_list">
<div id="a01" class="highlight_on_hover">
<div class="lineitem">
<div class="lineitem_lefttext">left text</div><div class="lineitem_righttext">right text</div>
</div>
</div>
</div>
</body>
</html>
#a_list {
float: left;
width: 600px;
margin: 0px 0px 0px 0px;
color: black;
background: white;
}
.highlight_on_hover {
color:black;
}
.highlight_on_hover:hover {
color:red;
}
.lineitem {
display: flex;
justify-content: space-between;
vertical-align: center;
}
.lineitem_lefttext {
/*background-color: green;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: center;
font-size: large;
}
.lineitem_lefttext:after {
content: " ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................";
vertical-align: center;
}
.lineitem_righttext {
flex-shrink: 0;
font-size: xx-small;
vertical-align: center;
}