JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<input type="checkbox" id="small"> <label for="small">small</label>

<div class="PortfolioDetails-PortfolioDetails__headerCenter__b4f18">
  <div class="PortfolioDetails-PortfolioDetails__activeStatus__b4f18">
    <div class="Portfolio-PortfolioActive__root__202aa Portfolio-PortfolioActive__active__202aa">
      <div>Listed</div>
    </div>
  </div>
  <div></div>
  <div class="PortfolioDetails-PortfolioDetails__table__b4f18">
  <dt class="atoms-LiteTable__label__f9094">Asking Price</dt>
      <dd class="atoms-LiteTable__value__f9094">$3,000,000</dd><dt class="atoms-LiteTable__label__f9094">Avg. Current Monthly Rent</dt>
      <dd class="atoms-LiteTable__value__f9094">$921</dd><dt class="atoms-LiteTable__label__f9094">Avg. Projected Monthly Rent</dt>
      <dd class="atoms-LiteTable__value__f9094">$985</dd><dt class="atoms-LiteTable__label__f9094">Current Annual Gross Yield</dt>
      <dd class="atoms-LiteTable__value__f9094">8.34%</dd><dt class="atoms-LiteTable__label__f9094">Projected Annual Gross Yield</dt>
      <dd class="atoms-LiteTable__value__f9094">8.99%</dd><dt class="atoms-LiteTable__label__f9094">Current Cap Rate</dt>
      <dd class="atoms-LiteTable__value__f9094">5.22%</dd><dt class="atoms-LiteTable__label__f9094">Projected Cap Rate</dt>
      <dd class="atoms-LiteTable__value__f9094">6.87%</dd><dt class="atoms-LiteTable__label__f9094">Current Annual Rent</dt>
      <dd class="atoms-LiteTable__value__f9094">$265,368</dd><dt class="atoms-LiteTable__label__f9094">Projected Annual Rent</dt>
      <dd class="atoms-LiteTable__value__f9094">$283,740</dd><dt class="atoms-LiteTable__label__f9094">Current Annual Expenses</dt>
      <dd class="atoms-LiteTable__value__f9094">$93,414</dd><dt class="atoms-LiteTable__label__f9094">Projected Annual Expenses</dt>
      <dd class="atoms-LiteTable__value__f9094">$63,347</dd><dt class="atoms-LiteTable__label__f9094">Current Net Operating Income</dt>
      <dd class="atoms-LiteTable__value__f9094">$156,714</dd><dt...

CSS

.PortfolioDetails-PortfolioDetails__table__b4f18 {
  width: 300px;
}

#small:checked ~ * .PortfolioDetails-PortfolioDetails__table__b4f18 {
  width: 300px;
}

dl, dd {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}

.PortfolioDetails-PortfolioDetails__table__b4f18  {
  border: 1px solid gray;
  display: grid;
  grid-template-columns: 2fr minmax(min-content, max-content);
}