How to putting elements next to each other in a div with display flex inline-CodePudding

I'm new to html/css, creating my first toy website to learn a little.

One of the pages is a form and I want to display inline the last element (a text area box) with the submit and clean buttons. The submit button should be next to the box aligned at the bottom end. I manage to align the buttons at the bottom but I can't put them next to the box, it's all occupying the same space. This is the code I have so far:

<div style="display: inline-flex">
    <label for="comments" style="float:left">Comments:<br>
       <textarea  style="min-width: 300%" rows="6"  name="comments"></textarea>
    </label>
    <label style="align-self: end; float: right">
         <input type="submit" value="Submit"/>
         <input type="button" onclick="...'; return false" value="Clean">
    </label>
</div>

And this is how it looks:

I can see that the display: flex; justify-self: right has no effect, I can remove it or change it for justify-self: right and it looks the same. I found many related questions and tried different combinations of the proposed solutions but none of them worked. Some of this things I tried for the buttons are:

style="align-self: end; display: flex; justify-self: right"
style="align-self: end; float: left"
style="align-self: end; margin-left: auto; margin-right: 0"

They all look basically the same. I'd appreciate any help with this.

Thanks!

CodePudding user response：

Change the textarea's min-width 300% to specific px.

.wrap {
   display: inline-flex;
}

.comments{
   margin-right: 10px;
}

.form-control {
   min-width: 300px;
}

.button {
   align-self: end;
}

<div >
   <label  for="comments" >Comments:<br>
           <textarea  rows="6" name="comments"></textarea>
   </label>
   <label >
           <input type="submit" value="Submit"/>
           <input type="button" onclick="...'; return false" value="Clean">
   </label>
</div>