JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://oneillwebs.com/www/css/reset.css">
<!-- Flex Box -->
<section>
    <!-- Flex Items -->
    <div>
        <p style="width:100%">1</p>
    </div>
    <div>
        <p>2</p>
    </div>
    <div>
        <p>3</p>
    </div>
    <div>
        <p>4</p>
    </div>
</section>

CSS

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;
}
div:first-child {
    border-top: 1px solid transparent;
}
div:hover {
    background: white;
}
p {
    margin:auto;
}