JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<div class="container">
  <table class="table">
    <tr>
      <td align="left" valign="top" style="width:20%">
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>
      </td>
      <td align="left" valign="top" style="width:30%">
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>        
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Longer test that should not wrap</span>
          </a>
        </div>
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>        
      </td>
      <td align="left" valign="top" style="width:30%">
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>
      </td>
      <td align="left" valign="top" style="width:20%">
        <div class="item-month-wrapper">
          <a tabindex="0" class="item-month sector-color-ic" data-toggle="popover">
            <span class="item-month-name">Short Text</span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

CSS

*, ::after, ::before {
    box-sizing: border-box;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.table {
  table-layout: fixed;
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 5px 0 !important;
    border-width: 0 !important;
    table-layout: fixed;
} 

.table td {
    position: relative;
    border-top: 1px solid #ccc !important;
    height: 115px;
    min-height: 115px;
    padding: 30px 0 12px 4px;
}

.item-month-wrapper {
  max-width: 100%;
  overflow: hidden;
}

.item-month {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis
}

.item-month-name {
  white-space: nowrap;
}

.item-month.sector-color-ic span::before {
    border-color: rgb(255,199,42);
}
.item-month span::before {
    display: inline-block;
    content: "";
    border-radius: 8px;
    border: 4px solid;
    height: 0;
    width: 0;
    margin-right: 6px;
}