Как расширить блок влево?

Question

[rinatoptimus]

Есть 3 блока, которые расширяются вправо при наведении. Как последний третий блок расширить влево, чтоб при этом сам блок никуда не уезжал?

<div class="block">
  <div class="test left">
    <p>first</p>
  </div>
  <div class="test right">
    <p>111</p>
  </div>
</div>

<div class="block block-second">
  <div class="test left">
    <p>second</p>
  </div>
  <div class="test right">
    <p>222</p>
  </div>
</div>

<div class="block block-third">
  
  <div class="test left">
    <p>third</p>
  </div>
  <div class="test right">
    <p>333</p>
  </div>
</div>

.block {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  overflow: hidden;
  display: inline-block;
  position: absolute;
}
.test {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.left, .right {
  display: inline-block;
}
.right {
  background-color: red;
}
.expanded {
  width: 220px;
  position: absolute;
  z-index: 10;
}

/* .block:hover {
  width: 220px;
} */
.block-second {
  left: 120px;
}
.block-third {
  left: 240px;
}

Демо.

Comments

[MODifikaTOR]

А почему не сделаешь выезд вниз а не в сторону?

Answer 1

[Никита]

Решение зависит от цели. Можно сделать на js прописывая там параметры положения и размеры.
Если нужно только css, то можно использовать position: absolute и псевдо-элемент :last-child для третьего блока с отдельным описанием анимации