JSFiddle - React, Tailwind, and code Playground

by Александр Парчагин

HTML

<div class="box">
  <div class="sidebar">
    Сайдбар
  </div>
  <div class="content">
    <div class="item"></div>
    <div class="item2"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS

.sidebar{
  float: right;
  width: 99px;
  height: 500px;
  border-left: 1px solid #000;
}
.content{
  margin-right: 100px;
  font-size: 0;
}
.item{
  display: inline-block;
  vertical-align: top;
  padding: 20px;
  width: 33.333%;
  height: 100px;
  background: #ccc;
  box-sizing: border-box;
}
.item:hover{
  background: red;
}
.item2:hover{
  width: 66.666%;
}