JSFiddle - React, Tailwind, and code Playground

by jonsuh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="rightbar">
    <div id="wrap">
        <div id="topStuff">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span>

                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <hr/>
        <div id="bottomStuff">
            <ul>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
    ...

CSS

/* I want dropdowns to be on the left */
 .dropdown-menu {
    top: 0;
    left: -160px;
    top: 30px;
    left: 0;
}
#rightbar {
    position: fixed;
    right: 0;
    height: 100%;
    background: lightgray;
    width: 300px;
}
/* Normally, you'd do this, but this makes the dropdown not show; ALSO, the scrollbar is off the screen */
 #wrap {
    height:100%;
    overflow:hidden;
}
#bottomStuff {
    height: 100%;
    height: calc(100% - 200px); /* Where 200px is the height of #topStuff + hr */
    overflow-y: auto;
}

JavaScript

// No JS if possible