JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>TV Guide | James Bond Movies</title>
        <meta name="description" content="A TV Guide dedicated to showing James Bond movies.">
        <meta name="keywords" content="007, james bond, sky, films, tv guide, action, tv schedule">
        <link rel="stylesheet" type="text/css" href="css/guide_style.css">
    </head>
    
    <body>
        <div id="container">
            <div id="guide">
                <div id="channel-list">
                    <ul>
                        <li id="channel-header">TOP</li>
                        <li class="channel">A</li>
                        <li class="channel">B</li>
                        <li class="channel">C</li>
                        <li class="channel">D</li>
                        <li class="channel">E</li>
                        <li class="channel">F</li>
                        <li class="channel">G</li>
                    </ul>
                </div>
                <!--end channel-->
                <div class="scroll">
                    <div id="times">
                        <ul>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>D</li>
                            <li>E</li>
                            <li>F</li>
                            <li>G</li>
                            <li>H</li>
                            <li>I</li>
                            <li>J</li>
                            <li>K</li>
                            <li>L</li>
                            <li>M</li>
                            <li>N</li>
                            <li>O</li>
                            <li>P</li>
                        </ul>
                    </div>
                    <!--end times-->
                    <div id="channel-rows">
                        <ul id="david-channel">
                            <li class="movie" id="1">Content</li>
        ...

CSS

/** MAIN **/
 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#container {
    position: static;
    width: 960px;
    margin: 0 auto;
}
.scroll {
    overflow: scroll;
    position: relative;
}
.scroll .movies {
    border: 1px solid grey;
}
body {
    font-family: Arial, sans-serif;
}
ul {
    list-style: none;
}
/** GUIDE **/
 #guide {
    position: relative;
    margin: 0 auto;
    max-width: 940px;
    height: auto;
    border: 1px solid grey;
    overflow: hidden;
}
/** CHANNELS **/
 #channel-list {
    position: relative;
    float: left;
    margin: 0px;
    width: 200px;
    padding-left: 0px;
    background: yellow;
}
#channel-list ul {
    margin: 0px;
    padding: 0px;
}
#channel-list ul li {
    height: 42px;
}
#channel-header {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 10px;
}
#channel-header, .channel {
    border: 2px solid grey;
}
.channel {
    text-align: center;
    padding: 10px 10px;
}
/** TIMES **/
 #times {
    float: right;
    padding: 10px 10px;
    width: 738px;
    border: 2px solid grey;
}
#times ul li {
    display: inline;
    padding-right: 60px;
}
#times ul {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    width: auto;
}
/** PROGRAMMES | ROWS **/
 #channel-rows {
    float: right;
    width: 738px;
    height: auto;
    background: #00fffb;
}
#channel-rows ul {
    white-space: nowrap;
    margin: 0px;
    padding: 0px;
    height: 42px;
    width: auto;
    padding: 10px 10px;
    border: 2px solid grey;
}
#channel-rows ul li {
    display: inline;
    border-right: 1px solid grey;
    padding: 13px 13px;
    margin: -3px;
}