how to align 3 columns

Question

I have 3 columns and I want each column to be aligned left. I am able to do this using flexbox but it seems like a lot of overhead. Is there a better approach?

span {
  display: block;
  margin:5px;
}

<div style="display:flex;justify-content:center">
  <div>
    <span>High</span>
    <span>Low</span>
    <span>Mean</span>
    <span>Median</span>
    <span>Mode</span>
  </div>
  <div>
    <span>=</span>
    <span>=</span>
    <span>=</span>
    <span>=</span>
    <span>=</span>
  </div>
  <div>
    
    <span>100</span>
    <span>80</span>
    <span>94.29</span>
    <span>100</span>
    <span>100</span>
     </div>
</div>

Answer 1

Start with a correct HTML structure where we can actually read the data then you can rely on a table layout

.container {
  display: table;
  margin: auto;
}
.container p {
  display: table-row;
  word-spacing: 8px; /* space between "=" and numbers*/
}
.container p span {
  display: table-cell;
  padding-right: 12px; /* space between the text and "=" */
}

<div class="container">
  <p><span>High</span> = 100</p>
  <p><span>Low</span> = 80</p>
  <p><span>Mean</span> = 94.29</p>
  <p><span>Median</span> = 100</p>
  <p><span>Mode</span> = 100</p>
</div>