How to align form elements next to image with CSS? - html

Question

I want to align a label, a text-input and an X sign next to each other using Bootstrap 4.
I managed to align the label and text-input but can't seem to do that with the X sign.
JSFiddle: https://jsfiddle.net/jptyuv5n/
How can we align that X sign next to the input field? What am I missing here?
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
}
.collection .form input {
display: inline-block;
width: 100%;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text1">
<span>X</span>
</div>
</div>
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>

Answer 1

Edit: I just saw in your question that you mentioned Bootstrap 4. Same result can be achieved with using bootstrap styles and 0 css lines from you.
The classes used in the snippet below are documented here: https://getbootstrap.com/docs/4.0/components/forms/#overview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 collection">
<div class="row">
<div class="col-3">
<img src="https://via.placeholder.com/150/771796">
</div>
<div class="col-9">
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label>text</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">X</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Old answer:
You can wrap the <input> and the <span> holding x in a div and use flex on it.
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
flex-direction: column; /* <- changed flex direction of form */
}
.collection .form input {
display: inline-block;
width: 100%;
}
.input-with-x { /* <- new classes added */
display: flex;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<div class="input-with-x"> <!-- <- new class used -->
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>
</div>