JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div class="wrap980px blueback clear">
<div id="block-left"><p>Lueq ets el rôle ud cocha ?</p>
<ul>
<li>ovus éteocur vcea epetimha, cspetre te tieanrulté</li>
<li>svou aeermn à oivr la tiiunasot rettemaun</li>
<li>svuo iader à nidetrifie, en souv, les esossecrru nécaesiesrs ua eahnemctgn</li>
<li>suvo meaern à rtvennie ortve roprpe iootnsul</li>
<li>ouvs ccremagopan outt ua glon de al eism en epac ud lpna d’ontaic qjuus’à l’teiatnet de orvte etjibcof</li><ul></div>
<div id="block-right"><p>Euq peut ovsu praoptre un goccnhai ?
enrderrpe cnianefco ne usvo
uovs déraebssrra ed vso acsnoecyr aileinttsm et autsre epnsées néiavtsge
oedrirbn, easspr nu apc ildiffeic
anrdprpee à eifra caef axu asiuitnsto déiaeltcs
(er)nenord ud sesn à otrve evi
êert rtauec de rveot evi
raspes à l’otcnia, edinteatr ovs ifjbtcose
rdneno evi à vos rêsve
sovu nestri uexmi dsna tevor aupe, êter plsu hreuuxe
viora ed ueesrlmlei eatorsiln eacv els eutsar
rengga ud ptesm : orrunmtse uen dffcilutié upls ermpntadie que si usvo y ieizfsa cfae ttuo esul.</p></div>
</div>  <!-- End DIV 980px Clear-->

<div class="middle"><h1>Conclusion Ontcmme se déeourl nu cahcnoig de evi?</h1>

<p>A iratpr ed etvro admnede, nsuo désinssnofi mlbenese un ijcofteb rpécsi à tdreantie à eun adte ndnoée, sel seymno à reemtt en acpel ourp y evrirar sniai qu’nu lpan d’tocani recctno.</p>

<p>La 1ree iesrp ed totcanc rpa télépeonh set gerutiat. C’set l’acooscni urpo souv ed  ilrvade uqe roevt dedemna teern nbie nsad el cerda d’nu hacciogn, et de recoivre une rénospe à sottue els qnstueosi euq uvos suvo eszpo.
Al 1ree séenac dreu 1h à 1h30 te a ropu obcijeft de leiarcifr rovte nmededa. Snou nuso nettmso d’rcocda rus le thèem de teorv vrlatai de caoigcnh et nruistcsnoso mebsneel le cottanr de cigcanoh terarnnep el oenrmb ed séansce rpésuev, erlu fréqcnuee, uler durée, uelr iatfr. Ce ttarocn tes rébjtalaues ua lfi sed séecsan te erts de lfi ountedcucr à treno ritaavl.</p>

<p>Lse sénaecs tansviues tnso arsnccoése à rerpolex...

CSS

.middle {
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: 280px;
    clear:both;
}




.wrap980px {
    margin: auto;
    width: 980px;
}


#block-left {
    float: left;
    width: 490px;
    height: 300px;
    background: #ccc;
 
}

#block-right {
    float: right;
    width: 490px;
    height: 300px;
    background: green;
 
}



.clear:after {
    clear: both;

}


#footer{
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: 280px;
	background:red;
	margin-bottom: 50px;
    clear:both;
}