JSFiddle - React, Tailwind, and code Playground

by hfougere

HTML

<div class="applicant-center__interview-sign-up__interview-list__flex-grid">
  <div class="applicant-center__interview-sign-up__interview-list__flex-grid__seventy-five-pct">
    Reggie, your interview is scheduled!
    
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    
    
   Reschedule Your Interview
  </div>
  <div class=".applicant-center__interview-sign-up__interview-list__flex-grid__quarter">
  
  Help<br/>
  
  Application Help Center<br/>
  Lorem ipsum dolor sit amet<br/>
  Mauris laoreet rhoncus ante sit amet<br/>
  Video: Lorem ipsum dolor sit amet nam<br/>
           
  </div>
</div>

<div test>
main radio here
</div>




<div class="applicant-center__interview-sign-up__interview-list__flex-grid">
  <div class="applicant-center__interview-sign-up__interview-list__flex-grid__thirty-five-pct">Select an interview</div>
  <div class="applicant-center__interview-sign-up__interview-list__flex-grid__sixty-five-pct">
    
    <div class="applicant-center__interview-sign-up__interview-list__flex-grid">
      <div class="applicant-center__interview-sign-up__interview-list__flex-grid__third">Day</div>
      <div class="applicant-center__interview-sign-up__interview-list__flex-grid__third">Time</div>
      <div class="applicant-center__interview-sign-up__interview-list__flex-grid__third">Show all | Hide full</div>
    </div>
           
  </div>
</div>


<div class="applicant-center__interview-sign-up__interview-list__flex-grid">
  <div class="applicant-center__interview-sign-up__interview-list__flex-grid__thirty-five-pct">Connecticut, Middletown</div>
  <div class="applicant-center__interview-sign-up__interview-list__flex-grid__sixty-five-pct">
    
    <div class="applicant-center__interview-sign-up__interview-list__flex-grid">
      <div class="applicant-center__interview-sign-up__interview-list__flex-grid__third">Day</div>
      <div class="applicant-center__interview-sign-up__interview-list__flex-grid__third">Time</div>
      <div...

CSS

.applicant-center__interview-sign-up__interview-list__flex-grid {
  display: flex;
  justify-content: space-between;
}
.applicant-center__interview-sign-up__interview-list__flex-grid .applicant-center__interview-sign-up__interview-list__flex-grid__third {
  width: 32%;
}

.applicant-center__interview-sign-up__interview-list__flex-grid .applicant-center__interview-sign-up__interview-list__flex-grid__thirty-five-pct {
  width: 35%;
}

.applicant-center__interview-sign-up__interview-list__flex-grid .applicant-center__interview-sign-up__interview-list__flex-grid__sixty-five-pct {
  width: 65%;
}

.applicant-center__interview-sign-up__interview-list__flex-grid .applicant-center__interview-sign-up__interview-list__flex-grid__quarter {
  width: 24%;
}

.applicant-center__interview-sign-up__interview-list__flex-grid .applicant-center__interview-sign-up__interview-list__flex-grid__seventy-five-pct {
  width: 75%;
}

[test] {
  border: 1px solid red;
}