Why does bootstrap place elements inappropriately?

Question

HTML

Help with bootstrap. It seems that all the classes are correctly placed. Point out the errors
Original:
What happened:
My code:
-html:

<form action="" class="touch-form" method="post">
         	<div class="d-flex touch-form__div">
         	<input type="text" class="touch-form__input col-3">
         	<input type="email" class="touch-form__input col-3">
         	</div>
         	<br>
         	<textarea name="" id="" cols="30" rows="10" class="touch-form__textarea col-7"></textarea>
         	<br>
         	<button class="touch-form__btn col-7">SEND MESSAGE</button>
         </form>

-css:

.touch-form__div{
 	justify-content: space-between;
 }

 .touch-form__textarea{
 	resize: none;
 }

help

Answer 1

good afternoon, I first wanted to write a detailed answer, but ...
the problem is not in bs, please read these instructions:
https://getbootstrap.com/docs/4.3/layout/grid/ - about the grid,
https:// getbootstrap.com/docs/4.3/components/forms/ - about form layout,
https://getbootstrap.com/docs/4.3/layout/utilities... - layout utilities,
all other problems should disappear by themselves.