Dá sa to rôzne. Ja by som to spravil takto:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--border: 1px solid;
}
.zaznam {
width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 1em;
}
.zaznam:last-child {
margin-bottom: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.cas {
display: inline-block;
border: var(--border);
border-right: none;
padding: 0.8em;
}
.border {
height: 100%;
border-right: var(--border);
}
.text {
display: inline-block;
border: var(--border);
border-left: none;
padding: 1em;
}
.text p:first-child {
margin-top: 0;
}
.text p:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="zaznam">
<span class="wrapper">
<span class="cas">🕔 08:42</span>
<span class="border"></span>
</span>
<span class="text">
<p>Cupcake ipsum dolor sit amet candy. Apple pie cake croissant icing cookie chocolate cake. Gingerbread cake lemon drops caramels jujubes bear claw. Bonbon sugar plum icing chocolate danish macaroon dragée. Tart liquorice chocolate cake ice cream chupa chups jelly-o liquorice. Muffin wafer gummi bears lollipop sweet roll pastry. Cookie fruitcake cake pie jelly lemon drops chocolate cake. Caramels chocolate bar candy icing tiramisu gingerbread soufflé cake. Pudding cheesecake danish jujubes gummies apple pie cake candy canes.</p>
<p>Topping croissant gummies tart brownie shortbread pudding. Bonbon chupa chups shortbread marshmallow gummies. Candy canes lemon drops biscuit toffee oat cake candy. Chocolate cake pastry topping tiramisu jelly oat cake chupa chups. Brownie sugar plum cheesecake gummi bears marzipan gingerbread chocolate. Cake dessert halvah oat cake cake.</p>
</span>
</div>
<div class="zaznam">
<span class="wrapper">
<span class="cas">🕔 11:45</span>
<span class="border"></span>
</span>
<span class="text">
<p>Cupcake ipsum dolor sit amet caramels shortbread. Croissant apple pie oat cake lemon drops apple pie. Pastry jelly beans marshmallow gummi bears danish dragée. Pudding jujubes muffin muffin gingerbread. Muffin apple pie tootsie roll marshmallow biscuit apple pie fruitcake cupcake. Cheesecake cheesecake gingerbread gummies jujubes soufflé dessert marshmallow croissant. Powder pudding carrot cake jujubes pie. Marshmallow jelly-o macaroon croissant dragée chocolate bar sugar plum candy shortbread. Oat cake soufflé jelly toffee tootsie roll tootsie roll gummies marshmallow. Apple pie marzipan halvah cupcake chocolate bar lollipop danish chupa chups.</p>
<p>Lollipop caramels jelly beans tart liquorice apple pie. Powder caramels liquorice jelly-o cookie macaroon icing gingerbread. Fruitcake chupa chups brownie caramels bonbon croissant. Wafer bonbon tart lemon drops brownie. Tiramisu shortbread icing lemon drops chocolate cake chupa chups. Chocolate cake croissant muffin bonbon halvah. Lemon drops cake pie carrot cake liquorice pudding chocolate cake soufflé.</p>
</span>
</div>
</body>
</html>
Choď na stránku: