Add items one under another when space available Flexbox - html

Question

I have the following issue, I have forms with inputs inside flex-wrap, but in few forms I have <textarea rows="5"></textarea> and it takes more height than an input field. Is it possible to have the following structure inside flex-wrap:
Have these 2 input fields one below the other, but in their .holder divs?
https://jsfiddle.net/by06rreq/
CSS:
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.holder {
width: 30%;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
}
HTML:
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>

Answer 1

You can see.. Do you want like this. I have tried with multi-layout css. through column-count
.flex {
column-count: 2;
column-gap: 0;
}
.holder {
width: 50%;
margin-bottom: 15px;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
margin-bottom: 0;
}
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>

Answer 2

I'm not 100% sure on what you're asking for & I can't comment due to lack of reputation so I have no option to make a guess in an answer.
So you'd like a similar layout to this?
-TextArea-
-Input-
-Input-
You could apply display: block and width: 100% to your .holder class, and then adjust the size of your input controls through their relevant css classes.
If I've completely misunderstood what you're trying to achieve, just comment and I'll see if I can help you further :)
EDIT:
After reading your recent comments I can offer another solution. however, it isn't using flex.
.block {
width: 100%:
display: block;
}
.textarea {
display: inline-block;
width: 30%;
}
.textarea textarea {
width: 100%;
}
.holder {
display: inline-block;
vertical-align: top;
}
.holder input {
display: block;
vertical-align: top;
}
<div class="block">
<div class="textarea">
<textarea class="textarea" name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
<input type="text">
</div>