JSFiddle - React, Tailwind, and code Playground

How to create side by side textareas?

by abubelinha

HTML

From Stackoverflow: <a href="https://stackoverflow.com/questions/27833951/how-to-create-side-by-side-textareas" target="_blank">How to create side by side textareas?</a>
<br>Some more info here: <a href="https://stackoverflow.com/a/26324193/710788">https://stackoverflow.com/a/26324193/710788</a>
<div class="textAreaColumn">
    <div>
        <span>Title 1</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 2</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 3</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 4</span>
        <textarea>Content goes here</textarea>
    </div>
</div>
New row  
<div class="textAreaColumn">
    <div>
<span>Title 1</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 2</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 3</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 4</span>
        <textarea>Content goes here</textarea>
    </div>
</div>

CSS

.textAreaColumn{
    width:100%;    
}
.textAreaColumn div{
    float:left;
    width:25%;
    padding:10px;
    box-sizing: border-box;
}

.textAreaColumn div span{
    display:block;
    text-align:center;
}

.textAreaColumn div textarea{
    box-sizing: border-box;
    width:100%;
    border:3px solid red;
    min-height:150px;
}