Style HTML table with vertical line

Question

I want to draw this using HTML5 and CSS:

I created the vertical line by using

.Column-VerticalLine {
    border-right: thin solid #A9A9A9;
}

with this HTML:

            <div class="col-sm-2 Column-VerticalLine">
                <div></div>
                <div style="font-weight: bold;"> Messeages </div>
                <div style="font-weight: bold;"> Messeage Body bytes </div>
                <div style="font-weight: bold;"> Process Memory </div>
            </div>
            <div class="col-sm-1">
                <div style="font-weight: bold;"> Total </div>
                <div> 0 </div>
                <div> 0B</div>
                <div> 21KB</div>
            </div>

But the appearance is not correct, as you can see:

How can I fix this and get the result I desire?

Answer 1

Why not use a table?

table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
}

td, th {    
   text-align: left;
   padding: 8px;
}

tr:nth-child(even) {
   background-color: #dddddd;
}

.test{
   width:160px ;
   border-right: 2px solid;
}

<table>
  <tr>
    <th></th>
    <th>Total</th>
    <th>Ready</th>
    <th>Unacked</th>
  </tr>
  <tr>
    <td class="test">Messages</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="test">Messeage Body bytes</td>
    <td>0B</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="test">Process Memory</td>
    <td>21KB</td>
    <td></td>
    <td></td>
  </tr>  
</table>

Answer 2

.flex {
  display: flex;
  text-align: right;
}
.vertical {
  flex-direction: column;
  margin: 0 1em;
}
.vertical div:first-child {
  font-weight: bold;
}
.outer {
  align-items: flex-end;
}
.outer > div:first-child {
  border-right: 1px solid black;
  padding-right: 1em;
  margin-right: .5em;
}
.col {
  margin: 0 .5em;
}
.col div:first-child, .outer > div:first-child {
  font-weight: bold;
}

<div class="outer flex">
  <div class="col">
    <div>Messages</div>
    <div>Message Body bytes</div>
    <div>Process Memory</div>
  </div>
  <div class="flex">
    <div class="col">
      <div>Total</div>
      <div>0</div>
      <div>0B</div>
      <div>21KB</div>
    </div>
    <div class="col">
      <div>Ready</div>
      <div>0</div>
      <div>0B</div>
      <div></div>
    </div>
  </div>
</div>

Hi, here is a solution using flexbox, though this could also be achieved using a table, since it is tabular data.