During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML code:
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 75vh;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
... (CSS styling continued)<label class="team_form_label" for="team_players">
Enter the name of the players:
</label>
<div class="names_input_feature">
<input type="text" id="team_players" class="team_form_input" name="team_players" placeholder="Must match the total"/>
<button id="name_submit_btn">
<i class="fa-solid fa-plus" style="color: #000000"></i>
</button>
</div>The desired outcome was for the input field and button to have equal heights, as illustrated in this screenshot: enter image description here
Despite my efforts using flex-box properties and researching online resources, I failed to achieve the intended result.
If you have any suggestions or solutions, please feel free to share. Your help is greatly appreciated!