JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id="form" class="message-box">
    <div class="message-containter">
      <div class="message left">
        If Mail notifications is checked, you will receive notifications about any event that occurs on the projects you belong to (issue added or edited, new document,...).
      </div>


      <div class="message right">
        dfsfsfsfsfddfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfs
      </div>
    </div>


  </div>

</body>

CSS

body {
      font-family: Tahoma, sans-serif;
      font-size: 12px;
      background-color: rgb(250, 250, 250)
    }
    
    .message {
      display: inline-block;
      width: auto;
      position: relative;
      padding: 7px;
      margin: 0 .5em .5em .5em;
      border-radius: 7px;
      cursor: pointer;
      /* break long text without spaces */
      word-break: break-all;
      word-break: break-word;
      hyphens: auto;
    }
    
    .message.left {
      margin-right: 50px;
      float: left;
      background-color: rgb(241, 240, 240);
      color: black;
      text-align: left;
    }
    
    .message.right {
      margin-left: 50px;
      float: right;
      background-color: rgb(0, 132, 255);
      color: white;
      text-align: right;
    }
    
    .message-box {
      background-color: white;
      overflow: hidden;
      overflow-y: scroll;
      height: 500px;
      width: 40%;
      min-width: 300px;
    }

JavaScript

// please notice the words THAT & DOCUMENT in the first div, 
// it was splitted