Estou com problemas pra fazer um ícone ficar na lateral de um elemento sem que ele se sobreponha ao elemento.
Meu código:
body{
font-family: Times, serif;
text-align: justify;
background-color: #EBE9E9;
color: rgba(0, 0, 0, 1);
word-wrap: break-word;
}
p{
text-align: justify;
text-indent: 1pt;
}
.icone{
display: block;
font-size: 3.4em;
margin: 4.5%;
}
.lateraldireita{
position: relative;
float:left
}
.grupo{
position: relative;
display: block;
width: 50%
top: 2em;
left: 2em;
padding: 1em;
margin-left: 10em;
margin-top: 2em;
background-color: white;
border: 1px solid rgba(193, 193, 193, 0.3);
border-radius: 1px;
box-shadow: 0px 0px 10px rgba(193,193,193,0.5);
transition: 3s;
}
hr{
display: block;
background-color: #444;
color: #555;
height:0.01px;
}
.blocointerno{
display: block;
box-sizing: border-box;
width: 20em;
left: 25em;
margin-left: -15;
}
<aside class="lateraldireita">
<article class="grupo experiencia">
<i class="fas fa-check-double icone"></i>
<div class="blocointerno">
<h3>Experiências Profissionais</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>JAN 2013 - SET 2014</p>
<p>Ut faucibus lacinia orci, quis consectetur purus facilisis vitae. Vestibulum blandit fringilla pharetra. Donec odio odio, ultricies sed venenatis vitae, dapibus in felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ornare egestas leo, viverra finibus justo ornare in. Etiam aliquet libero sed ante scelerisque commodo. Vestibulum ut feugiat ante. Maecenas nec fringilla ante, eu hendrerit magna. Nullam consectetur cursus est at vestibulum. Sed consequat, mauris quis hendrerit facilisis, orci velit hendrerit tortor, ac consectetur nibh dolor non arcu.</p>
</div>
</article>
</aside>
Como eu quero que o ícone se comporte:
Tentei:
- Criar um bloco interno, o que ajudou um pouco;
- usar um
position: absolute
, o que não ajudou muita coisa; - e até mudar o
left
do bloco interno, mas ele não obedece.