JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">
	<div class="DND_OneElement" draggable="true">
		<div class="DND_OneElement_UpperLeftText">13</div>
		<div class="DND_OneElement_UpperRightText">1</div>
		<div class="DND_OneElement_UpperMiddleText">LN050</div>
		<div class="DND_OneElement_MiddleLeftText">84326</div>
		<div class="DND_OneElement_MiddleRightText">230100</div>
		<div class="DND_OneElement_DownLeftText">Element 001</div>
	</div>
  </li>
  <li class="ui-state-default">
	<div class="DND_OneElement" draggable="true">
		<div class="DND_OneElement_UpperLeftText">10</div>
		<div class="DND_OneElement_UpperRightText">2</div>
		<div class="DND_OneElement_UpperMiddleText">LN051</div>
		<div class="DND_OneElement_MiddleLeftText">94275</div>
		<div class="DND_OneElement_MiddleRightText">230101</div>
		<div class="DND_OneElement_DownLeftText">Element 002</div>
	</div>
  </li>
  <li class="ui-state-default">
	<div class="DND_OneElement" draggable="true">
		<div class="DND_OneElement_UpperLeftText">27</div>
		<div class="DND_OneElement_UpperRightText">3</div>
		<div class="DND_OneElement_UpperMiddleText">LN052</div>
		<div class="DND_OneElement_MiddleLeftText">66795</div>
		<div class="DND_OneElement_MiddleRightText">230102</div>
		<div class="DND_OneElement_DownLeftText">Element 003</div>
	</div>
  </li>
  <li class="ui-state-default">
	<div class="DND_OneElement" draggable="true">
		<div class="DND_OneElement_UpperLeftText">5</div>
		<div class="DND_OneElement_UpperRightText">4</div>
		<div class="DND_OneElement_UpperMiddleText">LN053</div>
		<div class="DND_OneElement_MiddleLeftText">10825</div>
		<div class="DND_OneElement_MiddleRightText">230103</div>
		<div class="DND_OneElement_DownLeftText">Element 004</div>
	</div>
  </li>
  <li class="ui-state-default">
	<div class="DND_OneElement" draggable="true">
		<div class="DND_OneElement_UpperLeftText">8</div>
		<div class="DND_OneElement_UpperRightText">5</div>
		<div...

CSS

html *
{
   font-family: Sans-serif, Arial;
}

#sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    min-width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    min-width: 120px;
  }

.DND_OneElement {
    width: 250px;
    border: 1px solid green;
    padding: 2px;
	overflow: hidden;
	background-color: #A6E9FF;
}

.DND_OneElement_UpperLeftText {
	height: auto;
	width: auto;
	color: black;
	font-size: 10px;
	text-align: left;
	padding: 1px;
	float: left;
}

.DND_OneElement_UpperMiddleText {
	height: auto;
	width: auto;
	color: green;
	font-size: 10px;
	text-align: center;
	padding: 1px;
}

.DND_OneElement_UpperRightText {
	height: auto;
	width: auto;
	color: black;
	font-size: 10px;
	text-align: center;
	padding: 1px;
	float: right;
}

.DND_OneElement_MiddleLeftText {
	height: auto;
	width: 50%;
	color: purple;
	font-size: 12px;
	text-align: left;
	padding: 1px;
	float: left;
}

.DND_OneElement_MiddleRightText {
	height: auto;
	width: auto;
	color: blue;
	font-size: 12px;
	text-align: right;
	padding: 1px;
}

.DND_OneElement_DownLeftText {
	height: auto;
	width: auto;
	color: brown;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
	padding: 1px;
}