JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!DOCTYPE html>

<body class="bg-faded h-100">

<!--This is where we insert the tabs-->
<div id="current-tab" style="" class="h-100 fixed-top">

<div class="container-fluid d-flex flex-row m-0 p-0 h-100 w-100">
    <div id="stalls"
         class="bg-light d-flex flex-column">
        <div id="stall-list-header"
             class="container-fluid d-flex flex-row p-3 pt-5 bg-light">
            <h4 class="mb-0 mr-auto">Stalls</h4>
            <div>
                <!--Visual errors when outside div-->
                <button type="button"
                        class="btn btn-sm btn-outline-primary"
                        data-toggle="modal"
                        data-target="#add-stall-modal">Add
                </button>
            </div>
        </div>

        <!--Stall List-->
        <ul id="stall-list"
            class="list-group bg-faded">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item active">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>

        <!--Empty State-->
   ...

CSS

.navbar {
    /*background: #24282c;*/
    height : 40px;
}

.nav-item {
    border-right : 0.2px solid #dfe0e1;
}

.nav-item:first-child {
    border-left : 0.2px solid #dfe0e1;
}

a.nav-link {
    font-size     : 14px;
    font-weight   : 500;
    padding-left  : 20px !important;
    padding-right : 20px !important;
}

.nav-item a.nav-link:hover {
    transition : background 0.25s;
}

.navbar {
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index    : 1040;
}

.nav-item a.nav-link.active {
    background  : #edeeee;
    color       : #007bff !important;
    font-weight : normal;
}

.nav-item a.nav-link:hover {
    background : #edeeee;
}

#stalls {
    max-width    : 300px;
    min-width    : 300px;
    border-right : 1px solid rgba(0, 0, 0, .125);
    z-index      : 2;
}

#stalls .list-group .list-group-item {
    border-radius : 0 !important;
    border-right  : 0;
    border-left   : 0;
}

#products {
    flex-grow : 1;
}

#stall-list-header,
#product-list-header {
    border-bottom : 1px solid rgba(0, 0, 0, .125);
    min-height    : 90px;
    max-height    : 90px;
}

#stall-list,
#product-list {
    overflow-y : scroll !important;
    height     : 100%;
}

#product-list .card {
    max-width : 350px;
    min-width : 260px;
    height: 100%;
}

.card-deck {
    margin-right : 0;
    margin-left  : 0;
}