JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" border="0" class="tableheaders">
                <tr>
                    <td width="100">
                        <p>Ref.</p>
                    </td>
                    <td width="300">
                        <p>Location</p>
                    </td>
                    <td width="150">
                        <p>Date</p>
                    </td>
                    <td width="250">
                        <p>Duration</p>
                    </td>
                </tr>
            </table>
    
    
            
            <div>
            
            <div class="bookingbrief">
                <p class="ref">TT111460</p>
                <p class="location">TIGH MOR TROSSACHS</p>
                <p class="startdate"><span id="dgBookings_ctl00_lblStartDate">09 Jun 2011</span></p>
                <p class="numbernights">7 nights</p>
                <p class="details"><a href="javascript:;" class="moredetails">DETAILS</a></p>
                <div style="clear:both"></div>
            </div>
            
            
            <div class="spacer">
                
            </div>
            
            
            <div class="bookingdetails">
                <p class="propdesc">Hallay - Ground floor apartment - Sleeps 3 - Twin beds - 1 single sofa bed - Hallway - Bathroom - Open plan living area with patio - Average views - Steep 500 yard walk from main site - NO COTS/HIGHCHAIRS/Z-BEDS OR PETS - Tel: 01877 332864</p>
                
                
                <p class="info">STATUS</p>
                <p class="seperator">&gt;</p>
                <p class="infotext"><span id="dgBookings_ctl00_lblBookingStatus">Confirmed</span></p>
                <p class="info">PROPERTY</p>
                <p class="seperator">&gt;</p>
                <p class="infotext">C4</p>
                <p class="info">BOOKED</p>
                <p class="seperator">&gt;</p>
                <p class="infotext"><span...

CSS

* {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}

body {background-color:#000}

p {margin:5px 0px 5px 10px; float:left;}

table.tableheaders {background-color:#FFF; width:800px; margin:10px 0px}

a {color:#B22222}

div.bookingbrief {width:800px; background-color:#666; color:#FFF; clear:both}

div.bookingbrief .ref {width:90px;}

div.bookingbrief .location {width:290px;}

div.bookingbrief .startdate {width:140px;}

div.bookingbrief .numbernights {width:90px;}

div.bookingbrief .details {width:140px;}

div.spacer {margin:0px; width:800px; background-color:#FFF; height:3px; clear:both}

div.bookingdetails {margin:0px; width:800px; background-color:#CCC; font-size:12px; clear:both; display:none; position:relative}

div.bookingdetails .propdesc {width:770px;}

div.bookingdetails .propcomment1 {width:120px; clear:both}

div.bookingdetails .loccomment1 {width:235px; clear:both}

div.bookingdetails .info {width:125px; clear:left}

div.bookingdetails .seperator {width:30px;}

div.bookingdetails .infotext {width:615px;}

div.bookingdetails .pointsstate {width:120px;}

div.bookingdetails .corraddr {width:295px;}

div.extrainfo {margin:0px 0px 10px 0px; width:800px; background-color:#CCC; font-size:12px; clear:both}

div.extrainfo .essentials {width:125px}

div.extrainfo .seperator {width:30px;}

div.extrainfo .arrival {width:120px;}

div.extrainfo .siteguide {width:95px;}

div.extrainfo .accessguide {width:120px;}

div.extrainfo .accesscode {width:235px;}

div.extrainfo .extras {clear:both; width:125px;}

div.extrainfo .carhire {width:120px;}

div.extrainfo .flights {width:150px;}

div.blackout {position:absolute; top:0px; left:0px; display:none; width:100%; height:100%; background-color:#000}

div.points {margin:0px 0px 10px 0px; width:600px; background-color:#CCC; font-size:12px; clear:both; position:absolute; top:0px; left:100px; display:none}

div.points .pointsstatement {margin-top:20px; font-size:18px; clear:both; width:440px}

div.points p {margin:5px 0px...

JavaScript

$(document).ready(function(){
            
                $('.moredetails').click(function() { 
                    $('.bookingdetails').slideUp()
                    $('.points').slideUp()
                    $('.blackout').slideUp()
                    if ($(this).parent().parent().parent().find('.bookingdetails').is(':visible')){}
                    else
                    {
                    $(this).parent().parent().parent().find('.bookingdetails').slideToggle()
                    }
                });
                
                $('.PointsToggle').click(function() { 
                     var pointDiv = $(this).closest('div').siblings('.points');
                     var parentDiv = pointDiv.parent(); 
                     
                     parentDiv.data('orgHeight', parentDiv.height());
                     if(pointDiv.height() > parentDiv.height()){
                        parentDiv.animate({height : pointDiv.height()});   
                     }else{
                         pointDiv.css("height", parentDiv.height()); 
                     }
                     pointDiv.slideToggle();
                    
                     $('.blackout', parentDiv).slideToggle();
                });
                
                
                $('.PointsClose').click(function() {
                    var pointsDiv = $(this).closest('.points');
                    pointsDiv.parent().animate({height : pointsDiv.parent().data('orgHeight')});
                    pointsDiv.slideToggle();
                    pointsDiv.prev('.blackout').slideToggle();
                 });
                
                
                $(".PointsPrint").click(function() {
                     $(this).parent().printElement({ overrideElementCSS: ['../mybond/styles/myBookings-print.css'] });
                 });
                
                $('.AddressToggle').click(function() { 
                   ...