Сдвиг элемента html вместе с <div>

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.items { 
  width: 70%; 
  margin: auto; 
} 
 
.outer { 
  width: 100%; 
  height: 100px; 
  font-size: 14px; 
  position: absolute; 
  background: pink; 
  overflow: hidden; 
  transition: all .5s linear; 
  z-index: 10; 
  padding: 10px; 
  font-size: 10px; 
  outline: 3px solid transparent; 
} 
 
.item { 
  width: 25%; 
  height: 100px; 
  position: relative; 
  float: left; 
  margin: 10px; 
  outline: none; 
} 
 
.item:focus .outer { 
  height: auto; 
  overflow: none; 
  background: pink; 
  z-index: 1000; 
  outline: 3px solid red; 
  background: #fbfbfb; 
}

<div class="items"> 
  <div class="item" tabindex="-1"> 
    <div class="outer"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, 
      officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut 
      omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?400 
    </div> 
  </div> 
  <div class="item" tabindex="-2"> 
    <div class="outer"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, 
      officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut 
      omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?300 
    </div> 
  </div> 
  <div class="item" tabindex="-3"> 
    <div class="outer"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, 
      officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut 
      omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?200 
    </div> 
  </div> 
  <div class="item" tabindex="-4"> 
    <div class="outer"> 
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus expedita facere vitae nihil ad id voluptatem, ducimus aut animi, molestiae sapiente. Fugiat, magnam! Quod eos maiores, quas tempore fugiat incidunt tempora distinctio ab odio asperiores 
      amet, perspiciatis, sapiente adipisci fugit laboriosam rerum! Tempore ipsum illum maxime temporibus, accusantium sit necessitatibus esse molestias, pariatur vitae corporis ex modi inventore quis beatae rem odio sed asperiores assumenda! Totam, excepturi 
      molestiae quas aspernatur soluta illum aut tempore nam enim aliquam doloremque error repellat est quaerat odit perferendis nulla, eaque nemo minima illo laborum ipsa maxime ad amet? Error minus aspernatur possimus quia cum.560 
    </div> 
  </div> 
  <div class="item" tabindex="-5"> 
    <div class="outer"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, 
      officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut 
      omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?600 
    </div> 
  </div> 
  <div class="item" tabindex="-6"> 
    <div class="outer"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, 
      officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut 
      omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?700 
    </div> 
  </div> 
</div>