title: How can I prevent a bootstrap 4 column from shrinking on shorter text?
body: <p>I have a razor page with a three column grid such that:</p>
  
  <pre><code>@for (int i = 0; i &lt; Model.Questions.Count; i++)
  {
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 align-self-center order-first"&gt;Question Text&lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-8 col-md-8 col-lg-4 align-self-center"&gt;Fixed Width Table&lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 align-self-center order-last"&gt;Other Text&lt;/div&gt;
  &lt;/div&gt;
  }
  </code></pre>
  
  <p>The text in the first column is long enough to stretch over 2 lines in the lg screen size, and everything is fine and lined up.  But on some questions the text is short and the first column shrinks, throwing alignment out of whack.</p>
  
  <p>How can i fix this?</p>
  
  <p>Attached a screenshot (this is in Arabic, one of the languages the page handles, which evidently is more compact than English...).</p>
  
  <p><a href="https://i.stack.imgur.com/91HKI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/91HKI.png" alt="enter image description here"></a></p>