two items in a row without resizing - flexbox

Question

I have a simple problem: I want to put a text and an image in one row. I tried with display flex but it always resizes the image, that's not what I want.

This is my html code:

 <span class="head_form">
     <h3>Neue Einkaufsliste</h3>
     <img src="img/close.png" alt="close button">
 </span>

This is my CSS:

.head_form{
display: flex;
flex-wrap: wrap;}

I also want to put the closing imgage at the very right in the box. It always looks like this:

It's probably quite easy to solve but I'm so confused by now. I'm thankful for any help :)

I guess they discuss it here https://stackoverflow.com/questions/18611195/x-close-button-only-using-css — Oğuzhan Filiz, Jan 12 '21 at 16:25

score 1 · Accepted Answer · answered Jan 12 '21 at 16:22

<div class="flex-layout">
  <div class="flex-item"><h3>Neue Einkaufsliste</h3></div>
  <div class="flex-item"><img src="img/close.png" alt="close button"></div>
</div>

.flex-layout{
display: flex;
flex-wrap: no wrap;
}

.flex-item img{
width: (**Fixed width**px)
}

two items in a row without resizing - flexbox

1 Answers1