Html - How do we make an input field and a button inside the same div tag of the same height?

AshimShrestha
December 9, 2023
74 views
1 vote
2 Answers

I was working on an HTML-CSS project and came across a problem where I was not being able to make two elements inside a div tag of the same height. One of these elements is an input field and the other one is a button with an icon. The HTML code looks something like below;

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}

.form_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 4px;
  padding: 20px 20px;
  margin-top: 70px;
  margin-bottom: 20px;
  min-width: 400px;
}

#team_form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.team_form_label {
  color: white;
  font-size: 26px;
}

input[type="number"],
input[type="text"],
select {
  padding: 10px 15px;
  margin-bottom: 40px;
  box-sizing: border-box;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  color: black;
  font-size: 18px;
  width: 100%;
}

.names_input_feature {
  width: 100%;
  display: flex;
  /*Is this where I could not figure out the CSS?*/
  align-items: flex-start;
  align-content: center;
}

/*The player names adding button*/
#name_submit_btn {
  padding: 10px 20px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 4px;
  color: black;
  font-size: 22px;
  cursor: pointer;
  transition: 0.4s ease;
}

#name_submit_btn:hover {
  color: #fff;
  background-color: #3da736;
}

<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 result:

enter image description here

Note: I am kind of new to this so please don’t hate.

I tried using the flex-box properties but it would still be messed up and also looked for resources on the web, but was unsuccessful.

In the screenshot, I was expecting the input field and the button to be of the same height.

Thanks in advance 🙂

Answers

Do you mean like this?

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}

.form_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 4px;
  padding: 20px 20px;
  margin-top: 70px;
  margin-bottom: 20px;
  min-width: 400px;
}

#team_form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.team_form_label {
  color: white;
  font-size: 26px;
}

input[type="number"],
input[type="text"],
select {
  padding: 10px 15px;
  margin-bottom: 40px;
  box-sizing: border-box;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  color: black;
  font-size: 16px;
  width: 100%;
  height: auto;
  
}

.names_input_feature {
  width: 100%;
  display: flex;
  /*Is this where I could not figure out the CSS?*/
  align-items: flex-start;
  align-content: center;
}

/*The player names adding button*/
#name_submit_btn {
  padding: 10px 20px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 4px;
  color: black;
  font-size: 22px;
  cursor: pointer;
  transition: 0.4s ease;
}

#name_submit_btn:hover {
  color: #fff;
  background-color: #3da736;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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>

All you need to set input and label to the same height is this:

label, div {display: flex;}

label, div {
  display: flex;
  gap: 5px;
}

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do we make an input field and a button inside the same div tag of the same height?

Answers