JSFiddle - React, Tailwind, and code Playground

by jens1978

HTML

<div>
<p class="text">Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. <span class="preis">1,00€</span></p>

<dl class="exp">
<dt>In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni?</dt>

<dd>2,00€<dd>
</dl>
</div>

CSS

div {
  color:#000000;
  background-color:#eeeeee;

  height:165px;

  border:solid #2A2A2A 2px;
  border-radius:4px;
}

p.text {
  font-family:cursive, fantasy, sans-serif;
  font-size:1.05rem;
  font-style:normal;
  line-height:1.5em;

  color:#000000;
  max-width:54em;

  margin-bottom:1.5em;
}

span.preis {
  font-family:cursive, fantasy, sans-serif;
  font-style:normal;
  font-weight:bold;

  text-align:right;

  margin-left:0.15em;
  display:inline-block;
}

dl.exp dt {
  font-family:serif;
  font-size:1.05rem;
  line-height:1.5em;

  width:84%;
  max-width:54em;
  float:left;

  margin-right:0.75em;
}

dl.exp dd {
  font-family: sans-serif;
  font-size:0.95rem;
  font-weight:bold;
}