title: Centering child element that has siblings in parent div
body: <p>I'm attempting to have a grandparent that has multiple parent divs. Some of the parent divs have 3 elements and others only have 1. I need the 2nd element of a parent div to always align in the middle (and also aligning with the single element in the 1 element div type). The first and 3rd elements in the 3 element div type need to be touching the 2nd element, and only move towards the edges if their content grows. How do I achieve this with CSS? Most solutions that I've found online involve using margins or absolute positioning, but that screws up the relationship between the 2nd element and the 1st/3rd elements that need to be touching the 2nd element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="grandparent"&gt;
    &lt;div class="parent"&gt;
      &lt;span class="left-side"&gt;First Text!&lt;/span&gt;
      &lt;span class="must-be-centered"&gt;SOME TEXT!&lt;/span&gt;
      &lt;span class="right-side"&gt;Other Text!&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="parent"&gt;
      &lt;span class="must-be-centered"&gt;SOME TEXT!&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/vU0zM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vU0zM.png" alt="What alignment should look like"></a></p>
  
  <p>Notice that the large yellow element in the middle is centered perfectly in the middle, and the left and right elements are touching the middle element. The div with only one element still has that one element centered perfectly.
  red is grandparent
  blue is parent
  yellow is child spans</p>