JSFiddle - React, Tailwind, and code Playground
HTML
<div class="newspaper">
<p><span style="font-size: x-large;">Gentleman Basis-Ausstattung</span><br /><br /><span style="font-size: medium;">Es braucht nicht viel und Sie haben mit wenig Budget eine top 5%-Garderobe!</span></p>
<p><span style="font-size: small;">Mit den Grundausstattungs-Tipps von STOCK 11 sind Sie für jeden Anlass gewappnet. Hochzeit des besten Freundes? Sie werden fantastisch aussehen. Ein Bewerbungsgespräch für eine interessante neue Stelle ist im Anflug? Ihr Look wird makellos sein und die richtige Mischung aus Stil, Klasse, Understatement hervorbringen.</span> <span style="font-size: small;">Hat sich Ihr wichtigste Kunde für einen Besuch angemeldet? Sehr gut, denn Sie werden jetzt auch in Punkto Mode die Konkurrenz blass aussehen lassen. </span><br /><br /><span style="font-size: large;">Navy-Einreiher: Die Nummer 1</span><br /><br /><span style="font-size: small;">We</span></p>
<p><span style="font-size: small;">nn Sie nur ganz gelegentlich einen Anzug brauchen empiehlt STOCK 11 einen Navy-Anzug. Dazu drei weisse Masshemden, eine Krawatte sowie 1 weisses Einstecktuch. <span style="font-size: x-small;">Bild 1 (Anzug Drago 110s, klassischer Stil…)</span></span></p>
<p class="TextWrap"><br /><span style="font-size: small;"><img style="vertical-align: baseline;" title="Navy-Einreiher Drago 110s" src="{{media url="wysiwyg/SUIT-MASKING-324JAN.jpg"}}" alt="Navy-Einreiher Drago 110s" width="205" height="300" /></span><p><span style="font-size: small;">Der klassische blaue (navy) Anzug, Einreiher mit zwei Knöpfen. Wir empfehlen einen uni-farbenen Anzug mit einer einfachen webart. Weisses Masshemd (oxford) mit semi-spread Kragen und einem one-button angle-cut Ärmel. Dieses Hemd können Sie zu jedem beliebigen Anzug anziehen und sieht einfach top aus. Farbe können Sie später mit Krawatte und/oder Einstecktuch reinbringen. Krawatte bordeaux-farben (optional mit einer feinen Textur).</span><br...
CSS
.newspaper {
/* Chrome, Safari, Opera */
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule-style: outset;
-webkit-column-rule-width: 1px;
/* Firefox */
-moz-column-count: 2;
-moz-column-gap: 40px;
-moz-column-rule-style: outset;
-moz-column-rule-width: 1px;
column-count: 2;
column-gap: 40px;
column-rule-style: outset;
column-rule-width: 1px;
}
.TextWrap {
float: right;
margin:10px;}
@media only screen and (max-width: 40em) {
.newspaper{
/* Chrome, Safari, Opera */
-webkit-column-count : 1 ;
-webkit-column-gap : 0px ;
-webkit-column-rule-style : outset ;
-webkit-column-rule-width : 1px ;
/* Firefox */
-moz-column-count : 1 ;
-moz-column-gap : 0px ;
-moz-column-rule-style : outset ;
-moz-column-rule-width : 1px ;
column-count : 1 ;
column-gap : 0px ;
column-rule-style : outset ;
column-rule-width : 1px ;
}
.TextWrap {
float: right;
margin:10px;}