Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side.
This is the code snippet I have implemented:
.columnStyle {
column-count: 3;
display: flex;
justify-content: center;
position: relative;
}
.columnStyle ol {
padding: 0px;
counter-reset: item;
list-style-type: none;
}
.columnStyle ol li {
float: left;
width: 33.3333%;
padding: 35px;
display: block;
color: black;
}
.columnStyle ol li:before {
content: counter(item) " ";
counter-increment: item;
color: #ce9c1f;
font-size: 8em;
font-weight: bold;
text-transform: uppercase;
display: block;
}<div class="columnStyle">
<ol>
<li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
<li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
<li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
</ol>
</div>In addition, here is a link to a jsfiddle for reference:
https://jsfiddle.net/vL5an1ox/
I am looking to align the number 1 next to its respective text and ensure that the text is vertically centered. Any insights on how to achieve this?