JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box">
<div class="bound green">
<p class="text">Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. <span class="preis">1,00€</span></p>
</div>
<div class="bound brown">
<p class="preisliste">Strunz! Strunz ist zwei Jahre hier, hat gespielt 10 Spiele, ist immer verletzt! Was erlauben Strunz?</p>
<p class="preis">1,50€</p>
</div>
<div class="both"></div>
<div class="bound blue">
<dl class="exp">
<dt>In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer!</dt>
<dd class="preis">2,00€</dd>
</dl></div>
<div class="bound blue">
<input type="text" disabled value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod" size="100" />
<kbd>5,00€</kbd>
</div>
</div>
CSS
div.box {
color:#000000;
background-color:#eeeeee;
border:solid #2A2A2A 2px;
border-radius:4px;
padding:0.35em;
height:280px;
}
div.bound {
float:none;
clear:both;
margin-top:0.55em;
padding:0.15em;
height:3.26em;
}
div.green {
border:2px solid green;
}
div.brown {
border:2px solid brown;
}
div.blue {
border:2px solid blue;
}
div.both {
float:none;
clear:both;
}
.preis {
font-family:cursive, fantasy, sans-serif;
font-style:normal;
font-weight:bold;
}
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 {
text-align:right;
margin-left:0.15em;
display:inline-block;
}
p.preisliste {
font-family:serif;
font-size:1.05rem;
line-height:1.5em;
width:84%;
max-width:54em;
float:left;
margin-right:0.75em;
}
p.preisliste p,
p.preisliste div {
font-family:cursive, fantasy, sans-serif;
font-size:0.95rem;
}
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;
}
input {
border: none;
background-color: transparent;
}