Home display: flex moves submit button and how to make it "attached" to the input text

Questions

display: flex moves submit button and how to make it "attached" to the input text

July 31, 2023

I’m trying to replicate this:

If you can’t see it, both the icon on the left and the textbox have a light gray border, and the button to submit (Rechercher) is attached to the textbox.

Here’s what I managed to do

For clarity reasons I changed the border colour.
Here you can see that the submit button isn’t part of the 2 other items, and when I implement it into the Flexbox container here’s what happens:

With display: flex

How can I make it more like the model I’m trying to replicate?

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}

input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid var(--main-color);
  border-radius: 0 15px 15px 0;
  background-color: var(--main-color);
}

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

>Solution :

Add these two rules:

.barre-rechercher form {
  display: contents;
}
input {
  box-sizing: border-box;
}

The first one to make the children of the form be flex-children of the .barre-rechercher container, the second to make sure the height of both input elements is identical regardless of borders and paddings.

I also added border-right: none; to the text input field to attach the submit button directly to it without a border.

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.barre-rechercher form {
  display: contents;
}
.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}
input {
  box-sizing: border-box;
}
input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  border-right: none;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid blue;
  border-radius: 0 15px 15px 0;
  background-color: blue;
}

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>