JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class="right-panel">
  <div class="data-view" id="family-display">
    <h2>Selected Family Overview</h2>
    <div class="data-view__section hidden">
      <h3>Primary Account</h3>
      <table class="data-view__table">
        <thead>
          <tr>
            <th style="width:15%;">Name</th>
            <th style="width:25%;">Address</th>
            <th style="width:13%;">City</th>
            <th style="width:5%;">State</th>
            <th style="width:15%;">Phone</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody id="primary-contact"></tbody>
      </table>
    </div>
    <div class="data-view__section hidden">
      <h3>Other Contacts</h3>
      <table class="data-view__table">
        <thead>
          <tr>
            <th style="width:15%;">Name</th>
            <th style="width:25%;">Address</th>
            <th style="width:13%;">City</th>
            <th style="width:5%;">State</th>
            <th style="width:15%;"></th>
            <th></th>
          </tr>
        </thead>
        <tbody id="other-contacts"></tbody>
      </table>
    </div>
  </div>
</div>

CSS

.data-view__table {
  table-layout: fixed;
  width: 100%;
}