Modify element placement using HTML and CSS

Question

I’m having trouble getting an icon to stand on the side of an element without it overlapping the element.

My code:

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>

How I want the icon to behave:

I tried to:

• Create an internal block, which helped a little;
• wear a position: absolute, which didn’t help much;
• and even change the left of the inner block, but it does not obey.

Answer 1

Utilize flexbox in class .grupo or .experiencia. In the example below, as there is already a block of properties for the class .grupo, just change the display: block for display: flex:

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: flex;
        /* 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;
    }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<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>

Answer 2

Considering that your class .grupo was with position: relative; (I didn’t understand why), it was enough:

• change the positioning of the icon, through the class .icone:

  position: absolute;
  top: 40px;
  left: 15px;
  

• add a margin to the left of the class .blocointerno:

  margin-left: 60px;
  

---

At the end of the day, I found several problems with your CSS. I didn’t "rewrite" your code completely, but I improved on something superficial:

body{
    font-family: Times, serif;
    text-align: justify;
    background-color: #EBE9E9;
    color: rgba(0, 0, 0, 1);
    word-wrap: break-word;
}

.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;
}

.icone{
    display: inline-block;
    position: absolute;
    top: 40px;
    left: 15px;
    font-size: 3.4em;
}

.blocointerno{
    /* display: block; */
    box-sizing: border-box;
    width: 20em;
    left: 25em;
    margin-left: 60px;
    /* margin-left: -15; */
}

p{
    text-align: justify;
    text-indent: 1pt;
}

hr{
    display: block;
    background-color: #444;
    color: #555;
    height:0.01px;
}

<link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
<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>