div hover

HTML

<div class="home">
  <div class="left">
    Левый блок<br> Данный текст перекрывается блоком справа. А должен подстраиваться под размеры. Далее текст повторяется. Данный текст перекрывается блоком справа. А должен подстраиваться под размеры. Далее текст повторяется.
  </div>
  <div class="right">
    Правый блок<br> Данный текст спокойно подстраивается под новые размеры блока. Далее текст повторяется. Данный текст спокойно подстраивается под новые размеры блока. Далее текст повторяется.
  </div>

</div>

CSS

html,
	body {
	  height: 100%;
	  width: 100%;
	  margin: 0;
	  color: #FFFFFFFF;
	}

	.home {
	  width: 100%;
	  height: 100%;
	}

	.left {
	  position: absolute;
	  width: 50%;
	  height: 100%;
	  background: #00C2FFFF;
	  transition: 1.5s;
	}

	.right {
	  position: absolute;
	  right: 0;
	  width: 50%;
	  height: 100%;
	  background: #FF0083FF;
	  transition: 1.5s;
	}

	.left:hover {
	  width: 80%;
	  transition: 1.5s;
	  box-shadow: 38px 0px 88px 12px #000000;
	  z-index: 100;
	}

	.left:hover+.right {
	  width: 20%;
	  transform: 1.5s;
	}

	.right:hover {
	  width: 80%;
	  transition: 1.5s;
	  box-shadow: -28px 0px 88px 12px #000000;
	}

	.right:hover+.left {
	  width: 20%;
	  transform: 1.5s;
	}