JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inline dataplugin_entry person sectionedit2">
<dl>
<dt class="id">ID<span class="sep">: </span></dt>
<dd class="id">1234</dd>
<dt class="nachname">Nachname<span class="sep">: </span></dt>
<dd class="nachname">Bob</dd>
<dt class="vorname">Vorname<span class="sep">: </span></dt>
<dd class="vorname">Smith</dd>
<dt class="kanton">Kanton<span class="sep">: </span></dt>
<dd class="kanton">ZH</dd>
<dt class="rat">Rat<span class="sep">: </span></dt>
<dd class="rat">NR</dd>
<dt class="qry">xyd<span class="sep">: </span></dt>
<dd class="qry">XYZ</dd>
<dt class="fraktion">adsa<span class="sep">: </span></dt>
<dd class="das">XYZ</dd>
<dt class="funktion">asd<span class="sep">: </span></dt>
<dd class="funktion">fasd</dd>
<dt class="phone">Phone<span class="sep">: </span></dt>
<dd class="phone">055 555 55 55</dd>
<dt class="mail">Mail<span class="sep">: </span></dt>
<dd class="mail"><a class="mail" href="mailto:[email protected]">[email protected]</a></dd>
<dt class="website">Website<span class="sep">: </span></dt>
<dd class="website"><a rel="nofollow" class="urlextern" href="http://www.url.com">http://www.url.com</a>
</dd><dt class="twitter">twitter<span class="sep">: </span></dt>
<dd class="twitter">test</dd>
<dt class="language">Language<span class="sep">: </span></dt>
<dd class="language">EN</dd>
<dt class="topics">Topics<span class="sep">: </span></dt>
<dd class="topics">tag1<span class="sep">, </span>tag2<span class="sep">, </span>tag3</dd>
<dt class="intrests">Intrests<span class="sep">: </span></dt>
<dd class="intrests">a, b, c</dd>
<dt class="access">Zutrittsberechtigte<span class="sep">:...
CSS
div.person dl {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin: 0px;
width: auto;
}
dt { clear:left }
dt, dd { float:left;}