title: How can I properly vertically align the centers of these pieces of text beside a switch toggle?
body: <p><strong>Question:</strong></p>
  
  <p>I'm a bit rusty at CSS, so this may be an easy question.</p>
  
  <p>This is what the relevant section of my page looks like at the moment.</p>
  
  <p><a href="https://i.stack.imgur.com/Y0hj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0hj9.png" alt="toggle and text"></a></p>
  
  <p>And I've pulled out the code as best as I can to replicate it in a JSFiddle.</p>
  
  <p><a href="https://jsfiddle.net/srap5maw/" rel="nofollow noreferrer">https://jsfiddle.net/srap5maw/</a></p>
  
  <p>I've fiddled around with it, and tried my Google-foo but can't find anything obvious.</p>
  
  <p><strong>Code snippet:</strong></p>
  
  <pre><code>&lt;div class="centering-table"&gt;
  &lt;div class="centering-row"&gt;
    &lt;div class="centering-element"&gt;
      &lt;b&gt;Yes&lt;/b&gt;
    &lt;/div&gt;
    &lt;div class="centering-element"&gt;
      &lt;div class="switch-container"&gt;
        &lt;label class="switch"&gt;
          &lt;input type="checkbox"&gt;
          &lt;div class="slider round"&gt;&lt;/div&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="centering-element"&gt;
      &lt;b&gt;No&lt;/b&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>