JSFiddle - React, Tailwind, and code Playground

by cjake

HTML

<li class="class-1"> 
	<div class="icon"> 
		<span class="col-12">
			<svg width="18" height="18" class="col-12" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 39.6 38.5">
				<path d="M5,27.3S15.82,39.4,18.93,44.17C27.92,31.52,44.6,7,44.6,7L42,5.67,19.12,32.43,6.65,24.92Z" transform="translate(-5 -5.67)" style="fill:#95b534"></path>
			</svg>
		</span> 
	</div>  
	<p class="text">Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>                                    
</li>

CSS

* {
  font-family: Arial, sans-serif;
}

li {
  list-style: none;
  
  /* Display elements side by side using display: flex; */
  /* Read more about flexbox at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex;
  
  /* Center items along the vertical axis (specific to flexbox - not necessary)*/
  align-items: center;
}

li .icon {
  
  /* Space between the text and the icon */
  margin-right: 1em;
}