Home>
What you did

Without using table tag in HTML and css
The table layout was done with css.

There are two columns, but if the characters are long, a three-point reader is displayed.
However, the position is shifted between the non-three-point leader and the three-point leader.
I did not understand.

Why is it misaligned?

Code

html

<ul>
  <li>
    <p>Test</p>
    <div>Sample Sample Sample Sample Sample Sample Sample</div>
  </li>
</ul>

css

.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.listItem {
  border-top: 1px solid # 333;
  border-bottom: 1px solid # 333;
}
.text {
  display: inline-block;
  border-right: 1px solid # 333;
  padding-right: 8px;
  margin: 0;
}
.mainText {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Image

When hidden is also specified in.text