JSFiddle - React, Tailwind, and code Playground

HTML

<table class="appointment-table">
    <tr>
        <td>10:00</td>
        <td>nothing here</td>
    </tr>
    <tr>
        <td>10:30</td>
        <td rowspan="3" class="appointment-slot-wrapper">
            <div class="appointment-slot">
            <div>Here is the information</div>
            <div>Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information.</div>
            </div>
        </td>
    </tr>
    <tr>
        <td align = "left">11:00</td>
    </tr>
    <tr>
        <td align = "left">11:30</td>
    </tr>
    <tr>
        <td align = "left">12:00</td>
        <td>nothing here</td>
    </tr>
</table>

CSS

.appointment-table {
    width: 300px;
}
.appointment-table td {
    border: 1px solid black;
    padding: 4px;
    margin: 0;
    height: 20px;
    overflow: hidden;
}
.appointment-slot {
    background: red;
    padding: 4px;
    top: 0;
    left: 0;
    position: absolute;
}
.appointment-table .appointment-slot-wrapper {
    position: relative;
    background: blue;
    padding: 0;
    overflow: auto;
}

JavaScript

$(".appointment-table").find("tr").find("td").html("meow");