<table>
  <tr>
    <td data-pseudo-content="4"></td>
    <td></td>
    <td data-pseudo-content="-"></td>
    <td>
      <pre>&lt;div class=&quot;dialog__header&quot;&gt;</pre>
    </td>
  </tr>
  <tr>
    <td data-pseudo-content="5"></td>
    <td></td>
    <td data-pseudo-content="-"></td>
    <td>
      <pre>  &lt;div class=&quot;dialog__title&quot;&gt;</pre>
    </td>
  </tr>
  <tr>
    <td></td>
    <td data-pseudo-content="4"></td>
    <td data-pseudo-content="+"></td>
    <td>
      <pre>&lt;div class=&quot;lego-dialog__header&quot;&gt;</pre>
    </td>
  </tr>
  <tr>
    <td></td>
    <td data-pseudo-content="5"></td>
    <td data-pseudo-content="+"></td>
    <td>
      <pre>  &lt;div class=&quot;lego-dialog__title&quot;&gt;</pre>
    </td>
  </tr>
  <tr>
    <td data-pseudo-content="6"></td>
    <td></td>
    <td data-pseudo-content="+"></td>
    <td>
      <pre>    This is a really long title to show how the text can wrap when it gets really long.</pre>
    </td>
  </tr>
</table>

[data-pseudo-content]::before,
[data-pseudo-content--before]::before,
[data-pseudo-content--after]::after {
  content: attr(data-pseudo-content);
}

/*========================*/
/*== Irrelevant Styles ===*/
/*========================*/

@table-color: #f1f1f1;

html, body {
  height: 100%;
}

body {
  align-items: center;
  color: lighten(#000, 20);
  display: flex;
  justify-content: center;
}

table {
  background: @table-color;
  border: 1px solid darken(@table-color, 5);
  border-collapse: collapse;
  font-family: monospace;
  width: 450px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}

td {
  padding: 6px 4px;
}

td {
  // This is really bad CSS. Please
  // don't ever use selectors like this.
  &:nth-of-type(1) {
    background: lighten(@table-color, 3);
    padding-left: 10px;
  }

  &:nth-of-type(2) {
    background: lighten(@table-color, 3);
    border-right: 1px solid darken(@table-color, 5);
    padding-right: 10px;
  }
  
  &:nth-of-type(3) {
    padding-left: 13px;
    padding-right: 7px;
  }
  
  &:nth-of-type(4) {
    padding-right: 10px;
  }
}