JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div id="wrapper">
    <div id="col1">
        <p>Content here Content Here Content Here Content Here Content Here Content here Content Here Content Here Content Here Content Here Content here Content Here Content Here Content Here Content Here Content here Content Here Content Here Content Here Content Here Content here Content Here Content Here Content</p>
    </div>
    <div id="col2">Some Content</div>
</div>
<footer>
    <p>Footer Content</p>
</footer>

CSS

body {
    margin: 0;
}
#wrapper {
    width: 70%;
    display: table; 
    table-layout: fixed;
    margin: 0 auto;
}
#col1 {
    width: 70%;
    height: 30em; /* Seen as min-height by table-cell */
    display: table-cell;
    margin: 0;
    padding: 0;
    background: red;
}
#col2 {
    width: 30%;
    height: 30em; /* Seen as min-height by table-cell */
    display: table-cell;
    margin: 0;
    padding: 0;
    background: blue;
}