how to layout html text with icons and indents - html

Question

I need an example html/css which gives the following result
23:59 icon Some text which can wrap
like this
icon Some text which can wrap
like this
So there are 2 lines. The first line leads with a time. The 2nd line is indented the same width so that the icons align. The icons are a little bigger then the text just to make things tricky. To the right of each icon is some text which can wrap aligned with itself.
Would really appreciate some ideas how to do this.
I am also looking for a suggestion how to connect the 2 icons with a vertical line so that if the icons were circles then the whole thing would appear as a vertical barbell. But this is maybe too much bother

Answer 1

Keep things in their respected div and float them where you'd like.
.wrapper {
float: left;
}
div {
padding-right: 5px;
}
span {
float: right;
padding-left: 15px;
width: 180px;
}
<div class="wrapper">
<div>
23:59
</div>
</div>
<div class="wrapper">
<div>
icon
<span>Some text which can wrap like this</span>
</div>
<div class="wrapper">
icon
<span>Some text which can wrap like this</span>
</div>
</div>

Answer 2

If I understand you right, I think everything should work with Flex-Box.
Maybe you look at css-ticks to get some inspiration.
This should work:
.flex-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
i {
font-size: 2rem
}
div {
padding: 6px
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-check"></i>
</div>
<div>Lorem ipsum dolor set amet..</div>
</div>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-times"></i>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>

Answer 3

you can use table to easily achieve that layout.
To connect two icons by vertical line I would use pseudo selector.
/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
content: '';
display: block;
width: 1px;
height: 20px;
background: #000;
position: relative;
top: -20px;
}
It will need some tweaks, but you've got the idea.