I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. 🤷♂️ Using float: right or a negative margin-top property works, but I prefer to avoid those as they are not intended for this purpose and feel hacky.
This is my code:
.wrapper {
height: 100%;
}
.item,
form,
.input-container {
height: 100%;
display: inline-flex;
align-items: center;
}
button {
border: none;
background: #111;
height: 100%;
width: 16px;
display: inline-block;
}
.icon {
height: 16px;
width: auto;
float: left;
display: inline-block;
} <div class="wrapper">
<div class="item">
<!-- Search form with svg image -->
<form>
<button class="k-submit" for="search" id="k-submit" type="submit" aria-label="Open searchbox">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path d="M54.1 49.8L40 35.7c2.8-3.6 4.4-8.2 4.4-13.1 0-12-9.7-21.7-21.7-21.7S.9 10.6.9 22.6s9.7 21.7 21.7 21.7c4.9 0 9.5-1.6 13.1-4.4L49.9 54l4.2-4.2zM6.9 22.6c0-8.7 7.1-15.7 15.7-15.7 8.7 0 15.7 7.1 15.7 15.7 0 8.7-7.1 15.7-15.7 15.7s-15.7-7-15.7-15.7z" fill="#111"></path>
</svg>
</button>
<div class="input-container">
<!-- Search input field -->
<input value="Suche" type="search">
</div>
</form>
</div>
<div class="item">
<a href="http://www.example.com">
English
</a>
</div>
</div>I have modified the screenshot to provide a clearer view of the containers. The issue lies with the containers themselves not lining up properly.