JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item">
    <div class="title">
      <p>this is a title</p>
    </div>
    <div class="content">
      <div class="left">left content</div>
      <div class="right">right content</div>
    </div>
  </div>
  
    <div class="item">
    <div class="title">
      <p>this is a title</p>
    </div>
    <div class="content">
      <div class="left">left content</div>
      <div class="right">right content</div>
    </div>
  </div>
  
    <div class="item">
    <div class="title">
      <p>this is a title</p>
    </div>
    <div class="content">
      <div class="left">left content</div>
      <div class="right">right content</div>
    </div>
  </div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
}

.item {
  border: 1px solid #dadada;
  margin-bottom: 10px;
  background: lightblue;
}

.content .left {
  float:left;
}

.content .right {
  float: right
}

.content:after {
  clear: both;
  content: '';
  display: table;
}

JavaScript

let items = document.querySelectorAll(".item");
items.forEach(function (item) {

  let textnode = document.createElement('p');
  textnode.innerHTML = 'some text';
  //item.appendChild(textnode);
  document.getElementsByClassName('left').appendChild(textnode)

})