la verdad quiero hacer un estilo parecido al de esta imagen:
Y mi código se ve como esto:
Sin embargo he intentado muchas cosas, he buscado en diferentes sitios de Internet, he incluso en muchas preguntas relacionadas en éste sitio sin llegar a una solución.
A continuación voy a incluir el código HTML y los estilos CSS (relacionados con la pregunta).
/*HTML*/
<div id="i-do">
<center><h2>Things that I LOVE to do</h2></center>
<ul>
<li><i class="fas fa-headphones-alt"></i>Listen music</li>
<li><i class="fas fa-microphone"></i>Sing</li>
<li><i class="fas fa-cookie-bite"></i>Cook some dessert</li>
<li><i class="fab fa-adobe"></i>Design</li>
<li><i class="fas fa-pen-fancy"></i>Draw mandalas</li>
<li><i class="fas fa-paw"></i>Help animals</li>
</ul>
</div>
<div id="love-do">
<center><h2>Things that I can do</h2></center>
<ul>
<li><i class="fas fa-draw-polygon"></i>Logos</li>
<li><i class="fas fa-book"></i>Read a lot of books</li>
<li><i class="fas fa-store-alt"></i>Branding</li>
<li><i class="fas fa-pump-soap"></i>Product design</li>
<li><i class="fas fa-grin-squint-tears"></i>Funny GIFs</li>
<li><i class="fas fa-trophy"></i>Basically, whatever you want ;)</li>
</ul>
</div>
/*CSS*/
ul {
padding-left: 0px;
list-style: none;
z-index: 0;}
ul li {
text-decoration: none;
display: inline-block;
margin: 0 0 1.6875em 0;
padding: 0.35em 0 0 3.5em;
position: relative;
vertical-align: top;
width: 48%;}
#i-do, #love-do {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 208px;
padding: 15px;
line-height: 2em;
border-bottom: 1px solid #e42d40;}
ul li i {
background: royalblue;
text-align: center;
position: absolute;
display: block;
color: white;
border-radius: 100%;
padding: 12px;}
Gracias de antemano. Saludos.
P. D: Sé que la etiqueta ya no se utiliza en HTML5 pero me gustaría tener todo en orden en CSS antes de añadir ese estilo.
div{ float:right; }