<div class='accordion accordion--row'>
  <div class='accordion__item'>1</div>
  <div class='accordion__item'>2</div>
  <div class='accordion__item'>3</div>
  <div class='accordion__item'>4</div>
  <div class='accordion__item'>5</div>
</div>
<div class='accordion'>
  <div class='accordion__item'>1</div>
  <div class='accordion__item'>2</div>
  <div class='accordion__item'>3</div>
  <div class='accordion__item'>4</div>
  <div class='accordion__item'>5</div>
</div>

* {
  box-sizing: border-box;
}

html, body {
  margin: 0px;
}

body {
  background-color: #88e1eb;
  display: flex;
  height: 100vh;
}

.accordion {
  width: 40%;
  height: 100%;
  margin: auto;
  padding: 2em;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.accordion--row {
  flex-direction: row;
  width: 60%;
  gap: .5rem;
}

.accordion__item { 
  flex-basis: 10%;
  height: 100%;
  margin-bottom: 1em;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: helvetica;
  background-color: #e6f8ff;
  cursor: pointer;
  box-shadow: 2px 2px .3em #67adb5;
  transition: 
    flex-grow .3s linear,
    background-color 0.2s ease-in
}

.accordion__item:hover { 
    background-color: #cde9f7;
    flex-grow: 3;
} 

.accordion__item:active { 
  box-shadow: 1px 1px .1em #67adb5;
  background-color: #bde6fc;
  color: white;
}