JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<!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>

CSS

#a_list {
  float: left;
  width: 600px;
  margin: 0px 0px 0px 0px;
  color: black;
}

.highlight_on_hover {
  color: black;
}

.highlight_on_hover:hover {
  color: red;
}

.lineitem {
  display: flex;
  vertical-align: center;

}

.lineitem_lefttext {
  margin: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: center;
  font-size: large;
}

.lineitem_lefttext:after {
  content: " ";
  vertical-align: center;
}

.lineitem_righttext {
  margin: 10px;
  flex-shrink: 0;
  font-size: small;
  vertical-align: center;
}