JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="fullcredit">
<div class="leftcredit">German aleman</div>
<div class="rightcredit">Assos & Zara</div>
</div>


<div class="fullcredit">
<div class="leftcredit">Olivier Tom et Freezer</div>
<div class="rightcredit">Zadig, Volter & Nike</div>
</div>


<div class="fullcredit">
<div class="leftcredit">Sangoku</div>
<div class="rightcredit">Nike</div>
</div>


<div class="fullcredit">
<div class="leftcredit">La tafiole des marrais</div>
<div class="rightcredit">Reebok, Converse</div>
</div>

CSS

.fullcredit { display: table; width: 100%; table-layout: fixed; background: none; }
.fullcredit > .rightcredit, .leftcredit { display: table-cell; border: 0px}
.leftcredit { direction: rtl; padding-right:10px; }
.rightcredit  { padding-left:10px;}

@media screen and (max-width:1024px) {
.fullcredit {  margin-bottom:20px;}
.leftcredit, .rightcredit  {  width: 100%; text-align: center; float: left; }
}