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() { 
                
                    $(this).parent().parent().parent().find('.points').slideToggle(function() {
                        
                        var bookingdetailheight = $(this).parent().height()
                        
                        var $parentDiv = $(this).parent();
                        var $childDiv = $(this).parent().find('.points')       
                        
                        if($parentDiv.height() > $childDiv.height())  
                            $childDiv.css('height', $parentDiv.height());               
                        else
                            $parentDiv.css('height', $childDiv.height());
                            
                        
                    })
                    
                    $(this).parent().parent().parent().find('.blackout').slideToggle()
                    
                    $(this).parent().parent().css('height', bookingdetailheight);
                    
                    
                });
                
                
                //$('.PointsClose').click(function() { 
                    
                    
                    
                    //$(this).parent().parent().parent().find('.points').slideToggle(function() {
                        
                        
                    //})
                   ...