JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="img"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deser
  <ul>
    <li><span>fwefwe</span></li>
  </ul>
  unt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lo<ul>
    <li><span>fwefwe</span></li>
  </ul>rem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, u<ul>
    <li><span>fwefwe</span></li>
  </ul>t autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis libero quae minima aspernatur enim a dolor deserunt aut, dolorem tempore voluptatum amet accusamus, ipsa labore, ut autem perspiciatis architecto iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis...

CSS

div.img {
  float: left;
  width: 50%;
  height: 200px;
  background: red;
}
ul , li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li span {
  position: relative;
  /* display: block; */
  padding-left: 20px;
}
li span:after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  background: black;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

JavaScript

var a = document.querySelector('h1');

a.innerHTML = '<span>' + a.innerHTML + '</span>';