JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

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

CSS

.container {
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  height: 200px;
}

.item {
  flex: 0 1 50px;
  margin: 10px;
  padding: 20px;
  background-color: lightgray;
  border: 1px solid gray;
}

.container:hover {
  align-items: flex-end;
  background-color: red;
}