JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='mylist'>
  <li><span class='r1'></span><span class='my_erkl'> = Erklärung 1</span></li>
  <li><span class='r2'></span><span class='my_erkl'> = Erklärung 2</span></li>
  <li><span class='r3'></span><span class='my_erkl'> = Erklärung 3</span></li>
</ul>

CSS

.mylist {
		margin: 2px;
		padding: 0;
		margin-top: 15px;
	}
.mylist li {
		list-style: none;
		margin-bottom: 1px;
	}

.my_erkl {
vertical-align: 4.5px;
}

.r1
{
background-color: green;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: #808080;
  padding:0.3em;
  width:200px;
  height: 10px;
}

.r2
{
background-color:blue;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: 808080;
  padding: 0.3em;
  width: 200px;
  height: 10px;
}

.r3
{
background-color: red;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: #808080;
  padding: 0.3em;
  width: 200px;
  height: 10px;
}