JSFiddle - React, Tailwind, and code Playground

HTML

<section id="section">
      <a id="var" href="#">
        variable
      </a>
    </section>
    
    <div id="area1" contenteditable="true">
      Phasellus at libero lectus. Morbi pulvinar, augue non tincidunt consequat, mi turpis rhoncus urna, faucibus blandit
      quam lacus aliquet arcu.<br><br>Pellentesque in congue nulla. Vestibulum posuere ligula eget dui mollis aliquet. Fusce euismod
      nisl justo, eu sagittis ipsum facilisis a. Maecenas vel congue augue, sed bibendum sapien. Donec id semper enim, quis
      placerat ipsum.<br><br>
      Vestibulum non mauris a nisi dictum sodales. Cras gravida, felis a sagittis dapibus, massa ipsum pretium purus, in
      semper enim metus ac urna. Mauris bibendum metus ut lacus tristique pulvinar. Fusce viverra lorem quis consectetur
      volutpat. Donec elementum at orci vel auctor. Suspendisse sed fringilla sapien. Proin velit erat, dapibus nec nisl
      at, interdum tempus diam.
    </div>

CSS

#area1, #area2 {
      width: 200px;
      float: right;
      border: 1px solid #909090;
      -webkit-user-drop: element;
    }
    section {
      width:15%;
      min-height: 300px;
      float:right;
      margin:5px;
        position: fixed;
    }
    #var {
      padding: 4px 12px;
      text-align: center;
      vertical-align: middle !important;
      background-color: #d9d9d9;
      border: 1px transparent solid;
      color: #222222;
      border-radius: 0;
      cursor: pointer;
      display: inline-block;
      outline: none;
      font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 16px;
      margin: auto;
    }