JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
  <dt>Термин 1</dt>
  <dd>Описание термина 1</dd>
  <dt>Термин 2</dt>
  <dd>Описание термина 2</dd>
</dl>

CSS

* {
  box-sizing: border-box
}

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

dl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

dt {
  width: 50%;
  padding: 10px;
}

dd {
  display: none;
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  margin: 0;
}

dt:hover+dd {
  display: block;
}

dd:nth-of-type(1) {
  background: green;
}

dd:nth-of-type(2) {
  background: violet;
}