JSFiddle - React, Tailwind, and code Playground
HTML
<section>
<div class="letter-box clearfix"><span class="huge-letter">A</span><div class="cl-list"><div class="kunde"><span class="kundename"><a href="agentur/kunden/?activeclient=2">AAAAA</a></span></div></div></div>
<div class="letter-box clearfix"><span class="huge-letter">A</span><div class="cl-list"><div class="kunde"><span class="kundename"><a href="agentur/kunden/?activeclient=2">AAAAA</a></span></div></div></div>
<div class="letter-box clearfix"><span class="huge-letter">A</span><div class="cl-list"><div class="kunde"><span class="kundename"><a href="agentur/kunden/?activeclient=2">AAAAA</a></span></div></div></div>
<div class="letter-box clearfix"><span class="huge-letter">A</span><div class="cl-list"><div class="kunde"><span class="kundename"><a href="agentur/kunden/?activeclient=2">AAAAA</a></span></div></div></div>
<div class="letter-box clearfix"><span class="huge-letter">A</span><div class="cl-list"><div class="kunde"><span class="kundename"><a href="agentur/kunden/?activeclient=2">AAAAA</a></span></div></div></div>
</section>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
.clearfix:before,.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
section{
border-top: 1px solid red;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
column-count: 3;
column-gap: 20px;
font-family: 'Open Sans', Courier;
}
.letter-box {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 30px;
}
.huge-letter {
border-top: 1px solid blue;
font-family: 'Open Sans', courier;
font-weight: 600;
display: block;
font-size: 2em;
line-height: 56px;
float: left;
width: 70px;
text-align: center;
}
.cl-list {
display: block;
float: right;
width: 115px;
font-family: 'Open Sans', courier;
font-weight: 600;
font-size: 13px;
color: #A3A3A3;
margin-top: 3px;
}
.kundename {
margin-bottom: 3px;
display: block;
}