title: Is it possible to set a td with display flex to be full height, or have different CSS to achieve the same effect?
body: <p>I have inherited a project where someone decided to set the <code>display</code> for a <code>td</code> to <code>flex</code>. One of the consequences of this is that when there are other <code>td</code>s in the row that span multiple lines, the <code>td</code> with <code>display: flex</code> does not stretch to the height of the other <code>td</code>s.</p>
  <p>The correct way to fix this (I think) would be to remove the <code>display: flex</code> from the <code>td</code> and have it on an inner <code>div</code>, but I currently only have permissions to modify the CSS, so I'm wondering if there is any way to fix it with CSS only (while preserving the layout within the <code>td</code> as shown in the made-up code snippet below)?</p>
  <p>EDIT: The desired layout is to have a left and right side within the <code>td</code>, the right side being a <code>span</code> that is a colored dot. The colored dot needs to always be on the right and top aligned even on a mobile device when the <code>td</code> is very narrow and the left side ends up wrapping.</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-css lang-css prettyprint-override"><code>table td {
    border: 1px solid black;
  }
  
  td.flex {
    display: flex;
    justify-content: space-between;
  }
  
  span.right {
    display: inline-block;
    margin-left: 1em;
    width: 1em;
    border-radius: 50%
  }
  
  span.red {
    background-color: red;
  }
  
  span.green {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="flex"&gt;&lt;span&gt;Left &lt;/span&gt;&lt;span class="right red"&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;td with&lt;br&gt;multiple rows&lt;br&gt;blah blah blah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="flex"&gt;&lt;span&gt;Left side longer &lt;/span&gt;&lt;span class="right red"&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;td with&lt;br&gt;multiple rows&lt;br&gt;blah blah blah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class="flex"&gt;&lt;span&gt;The right way to do it &lt;/span&gt;&lt;span class="right green"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;td with&lt;br&gt;multiple rows&lt;br&gt;blah blah blah&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>