How to select previous sibling

<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>

<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>

.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}

.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}