JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">

  <div class="text text2">Текст 2(наводить мышь сюда)</div>
  <div class="text text3">Текст 3(теперь сюда)</div>

  <div class="col-md-6">
    <div class="more text1">Текст 1</div>
    <div class="more text4">Текст 4</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 300px;
}

.col-md-6 {
  order: 1;
  width: 50%;
  height: inherit;
  border: 1px dotted gray;
}
.text {
  order: 2;
  width: 50%;
  padding: 10px;
}
.more {
  display: none;
}
.text:hover {
  color: green;
}
.text2:hover ~ .col-md-6 {
  background: green;
}
.text2:hover ~ .col-md-6 .text1 {
  display: block;
}

.text3:hover ~ .col-md-6 {
  background: violet;
}
.text3:hover ~ .col-md-6 .text4 {
  display: block;
}