JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

CSS

.container {
  display: flex;
}

.container > div {
  flex: 1;
  border-right: 2px solid black;
  height: 300px;
  padding: 10px;
  transition: 0.5s flex;
}

.container > div:hover {
  flex: 3;
}

.container > div:last-child {
  border-right: 0;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
    height: 100vh;
  }
  
  .container > div {
    border-right: none;
    border-bottom: 2px solid;
  }
}