How can I create equidistant space between words based on their lengths?

Supposed I have a horizontal list:

About Admissions Academics Research News Events

I want them to be n-unit apart from the proceeding word based on their length.

---

| About | Admissions | Academics | Research | News | Events |

The illustration above is essentially the heart of my question. How can I make the words equidistant from each other? How can I vary the area of the rectangles in order to create equidistance?

For example, "Research" will have a much greater area than "News" but their distance is the same as the words such as "About" and "Admissions" and "Admissions" and "Academics".

 .school_info {
      background-color: black;
      text-align: center;
    }

    .school_info_row {
      margin: 0 10% 0 10%;
      width: auto;
      padding-bottom: 15px;
    }
    
    .public_info_container {
      padding-left: 0;
      padding-right: 0;
    }
    
    .public_info {
      font-size: 20;
      font-family:'Cinzel', serif;
      color: white;
      width: 150px;
    }

<div class="school_info">
          <div class="row school_info_row">
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">About</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Admissions</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Academics</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Research</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">News</a>
            </div>
            <div class="col-lg-2 col-md-4 public_info_container">
              <a class="public_info" href="">Events</a>
            </div>
          </div>
        </div>
    </div>