I need help creating a "hat" with two textarea columns using the spectre.css framework. My goal is to have these columns resize based on the screen size, stacking on top of each other when the screen size is below 600px. I can achieve this without any issues as long as the textarea doesn't have an associated label. But when there's a label, it causes the textarea to overlap the current column space at the bottom. It seems like the label isn't being factored in when calculating the column size and I'm not sure why. Can you help me fix this issue?
*, ::before, ::after {
box-sizing: border-box;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: .4rem;
padding-right: .4rem;
width: 100%;
}
.columns {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -.4rem;
margin-right: -.4rem;
}
.column {
-ms-flex: 1;
flex: 1;
max-width: 100%;
padding: .25rem;
}
.col-12,
.col-11,
.col-10,
.col-9,
.col-6 {
-ms-flex: none;
flex: none;
}
.col-12 {
width: 100%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-6 {
width: 50%;
}
@media (max-width: 600px) {
#hattop {
height: 35vh;
}
.column.col-sm-12,
.column.col-sm-11 {
-ms-flex: none;
flex: none;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
}
.col-mx-auto {
margin-left: auto;
margin-right: auto;
}
.col-ml-auto {
margin-left: auto;
}
.col-mr-auto {
margin-right: auto;
}
.form-label {
color: #fff;
}
.form-input {
appearance: none;
background: #fff;
border: .05rem solid #5755d9;
border-radius: 10px;
color: #3b4351;
max-width: 100%;
padding: .25rem .4rem;
position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
width: 100%;
word-wrap: anywhere;
}
textarea {
overflow: auto;
resize: none;
}
textarea.form-input {
height: 100%;
width: 100%;
}
#hattop {
background-color: rgb(31, 26, 44);
padding: 1rem .5rem;
height: 50vh;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
@media (max-width: 600px) {
#hattop {
height: 35vh;
}
}<div class="container">
<div class="columns col-sm-11 col-10 col-mx-auto">
<div id="hattop" class="columns col-9 col-mx-auto">
<div class="column col-sm-12 col-6 col-ml-auto">
<label for="nams" class="form-label">Enter names separated by line</label>
<textarea class="form-input" id="names" placeholder="Names"></textarea>
</div>
<div class="column col-sm-12 col-6 col-mr-auto">
<label for="tasks" class="form-label">Enter tasks separated by line</label>
<textarea class="form-input" id="tasks" placeholder="Tasks"></textarea>
</div>
</div>
</div>
</div>