Unable to align having 3 elements in a row. One should be to the left, and the rest should be centered

Question

I have the follwing:

.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.el1 {
  margin-right: 10vw;
}

.el2 {}

.el3 {}

<div class="container">
  <Button class="el1">Info</Button>
  <input class="el2"></input>
  <Button class="el3">Search</Button>
</div>

The problem is, that this created two centered elements and the first element having an unknown position since it depends on the screen size.

Instead, I want it to be next to the beginning of the screen on the left side, left aligned with the other two elements sitting in the center of the screen.

Answer 1

You should wrap input and last button in a div container and set the position to absolute.

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.child-wrapper {
  position: absolute;
  margin: auto;
}

.el1 {
  margin-right: auto;
}

.el2 {}

.el3 {}

<div class="container">
  <Button class="el1">Info</Button>
  <div class="child-wrapper">
    <input class="el2"></input>
    <Button class="el3">Search</Button>
  </div>
</div>

Answer 2

You can make .el1 position: absolute, and set the align-items of the container to center. The HTML structure remains as is.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.el1 {
  position: absolute;
  left: 0;
}

<div class="container">
  <Button class="el1">Info</Button>
  <input class="el2" />
  <Button class="el3">Search</Button>
</div>