JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">


  <div align="center">



    <div style="width: 1000px; margin-top: 355px;">

      <div style="float: left; width: 50px; font-size: 7pt; font-family:Arial; text-align: center; height: 100px;">
        <div style="margin-bottom: 10px;">&nbsp;</div>
      </div>
      <div id="bookexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000; font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;">
        <div style="display: block;" id="expand">
          <div style="margin-top: 15px;">&nbsp;Bookings</div>
          <div style="margin-top: 35px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Consultation
            <br>&nbsp;Hours</div>
          <div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Evening
            <br>&nbsp;Opening</div>
          <div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Early
            <br>&nbsp;Mornings</div>
          <div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Weekend
            <br>&nbsp;Opening</div>
          <div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online Appt
            <br>&nbsp;booking</div>
          <div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Booking
            <br>&nbsp;Timescale</div>
          <div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Advance
            <br>&nbsp;Booking</div>
          <div style="margin-bottom: 0px; font-family:Arial;...

JavaScript

$(document).ready(function() {
  $('#expand').click(function() {
    switch ($('#bookexp').css('width'))

    {

      case '144px':



        $('#bookexp').css('width', '720px');
        $('#bookexp').removeClass('bg3').addClass('bg4');
        $('#contactexp').css('width', '0px');
        $('#arrivalexp').css('width', '0px');
        $('#clinicalexp').css('width', '0px');
        $('#followupexp').css('width', '0px');


        break;



      case '720px':



        $('#bookexp').css('width', '144px');
        $('#bookexp').removeClass('bg4').addClass('bg3');
        $('#contactexp').css('width', '144px');
        $('#arrivalexp').css('width', '144px');
        $('#clinicalexp').css('width', '144px');
        $('#followupexp').css('width', '144px');

        break;
      default:
    }

  });

});