Выравнивание элементов в строке bootstrap в блок-схеме

Question

хорошо, это кажется чем-то очень простым, но я не могу понять это ... возможно, я просто слишком обдумываю это, но мне нужна помощь. Я пытаюсь выровнять эти элементы в созданной мной потоковой диаграмме, чтобы каждый «столбец» (а не столбец bootstrap) выравнивался в одном и том же месте и его было легче читать. на моем скриншоте столбцы имеют цветовую кодировку, но, поскольку некоторые поля длиннее других, они начинают смещаться дальше go. Я упустил некоторые вещи из моего кода для простоты, потому что я использую Express / E js с базой данных, и это выглядит очень грязно. дайте мне знать, если вам нужно что-то еще увидеть!

я знаю, что установка ширины для линии между полями делает ее неработоспособной, поэтому я попытался установить ее на авто и сделать justify-content-start, но это линии исчезают и не выравнивают div

css:

 .line {
    font-size:0;
    width:55px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:20px;
    float:left;
 } 

.box {
    display:inline; 
    border:1px solid #000;
    padding: 5px;
    font-size: 0.9rem;
}

html с e js. так что это для l oop, который ищет в БД сред:

<div class="container-fluid">
<% environments.forEach(function(environment){ %>
<div class="row justify-content-start">
  <div class="box color1"><%= environment.eps %> </div>
  <div class="line"></div>
  <div class="box color2"><%= environment.version%> </div>
  <div class="line"></div>
  <div class="box color3"><%= environment.region %></div>
  <div class="line"></div>
  <div class="box color4"><%= environment.kc %></div>
  <div class="line"></div>
  <div class="box color5"><%= environment.kg %></div>
  <div class="line"></div>
  <div class="box color6"><%= environment.mem %></div>
  <div class="line"></div>
  <div class="box color1"><%= environment.SM %></div>
  <div class="line"></div>
  <div class="box color2"><%= environment.eg %></div>
  <div class="line"></div>
  <div class="box color3"><%= environment.IV %></div>
  <div class="line"></div>
  <div class="box color4"><%= environment.CP %></div>

  <a href="/environments/<%= environment._id %>/edit"><button class="btn btn-warning btn-sm">edit</button></a>

  <form action="/environments/<%= environment._id %>?_method=DELETE" method="POST">
    <button class="btn btn-danger btn-sm">delete</button>
  </form>

</div> 
<% }); %> 
</div>