Parent div animation while focusing input

Question

I try to do this, when someone clicks on the input field, he rises to the top of the screen. I can do this work, but I cannot move other content in the parent div along with it. Here is what I have:

container{

} 
input#search-bar:focus{
  position: absolute;
  border: 1px solid #008ABF;
  transition: 0.35s ease;
  color: #008ABF;
  margin-top: -10px;
}

<div class="container">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
  <form class="formHolder">
    <input type="text" id="search-bar" placeholder="Search">
  </form>
</div>

Run codeHide result

I want My Header to also move 10 pixels at the same time as the search bar.

If you need more information that I forget to provide, ask and I will send it.

Answer 1

Pure CSS Solution - Flexbox Ordering

html , , dom, input - 1- html, 2- . Flexbox order .

.

.container {
  display: flex;
  flex-direction: column;
}
input {
  display: flex;
  flex-direction: column;
  order: 2;
}
.brandHeader {
  display: flex;
  order: 1;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
  margin-top: -10px;
}

<form class="container">
  <input type="text" id="search-bar" placeholder="Search">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
</form>

Hide result

https://jsfiddle.net/Hastig/djj01x6e/

, , .

---

2- CSS- - :

, , order: x;

.container {
  display: flex;
  flex-direction: column-reverse;
} 
input {
  display: flex;
  flex-direction: column;
 }
.brandHeader {
  display: flex;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
 margin-top: -10px;
}

<form class="container">
    <input type="text" id="search-bar" placeholder="Search">
    <div class="brandHeader">
      <h1>My Header</h1>
    </div>
</form>

Hide result

https://jsfiddle.net/Hastig/djj01x6e/1/

---

Flexbox, : , 1 dom, 2- , , html.

Answer 2

Class brandHeader input:focus jQuery, h1 input