Wie sorge ich dafür, dass ein Flex-Item die restliche Zeilenbreite einnimmt?

[Tabula_Rasa]

Hallo zusammen,

ich habe einen Container mit einem Bild, einer Textarea und einem Button:

<div class="write-comment">
               <img src="./image.png" alt="Profile Image" class="input-image">
               <textarea class="comment-input" placeholder="Write a comment"></textarea>
               <button class="btn btn-primary ">Send</button>
</div>

.write-comment {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 0.5px solid lightgray;
}

.comment-input{
    font-size: 14px;
    min-height: 30px ;
    resize: none;
}

.input-image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
}

Das Bild und die Textarea sollen in einer Zeile sein und die Textarea soll die restliche Breite dieser Zeile einnehmen und der Button soll auf die nächste Zeile rücken. Wie bekomme ich das hin?

 

[Tabula_Rasa]

Danke für die Möglichkeiten. Ich bin mir meist nicht sicher, wie es ein professioneller CSS-Programmierer das machen wrüde, deshalb frage ich meistens nach.