Layout of text box

Question

I’m trying to do something like those forum elements, which show a div with a user photo and a space with some text on the right, you know?
I’ve tried to position one on the other side using the float but the part of the text was crooked... Like... It wasn’t centered on your part in the contender.

.spe-layout {
    height: 210px;
    border-left: 1px solid #4774c6;
    border-bottom: 1px solid #4774c6;
    border-right: 1px solid #4774c6;
}

.spe-layout h1 {
    background-color: #4774c6;
    color: white;
    padding-bottom: 5px;
    margin-top: 0px;
}

#Dq {
    display: flex;
    flex-direction: column;
}

#parte-user {
    align-self: flex-start;
}

#foto {
    background-color: #010000;
    height: 110px;
    width: 110px;
}

<section id="Dq" class="spe-layout">
  <h1>Título</h1>
  <div id="parte-user">
    <h3>Gabriel</h3>
    <div id="foto">Foto</div>
  </div>
  <span>Texto</span>
</section>

Answer 1

I tried to organize the code differently - I removed id's e susbsituí por classes with the thought that these "User Cards" will be used in more places, and I also tried to somehow minimize the code.

When an element repeats several times in a document (on the same page), we should use classes and not id's, because id's are only to be used once in the entire document. More about this at this link.

.userContainer {
    border: 1px solid #4774c6;
}
h1.userHeader {
    margin: 0;
    background-color: #4774c6;
    color: #fff;
    padding: 5px 0px 5px 10px;
}
.userPicture {
    float: left;
    margin-right: 16px!important;
}
.clear {clear:both;} /* Limpa/remove os floats */

<div class="userContainer">
    <h1 class="userHeader">Alexis Cooper</h1>
    <img class="userPicture" src="http://lorempixel.com/110/110/people/1/" width="110" height="110">
    <p class="userInfo">
        Random text about Alexis - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate eget tellus ut sodales.
    </p>
    <div class="clear"></div> <!-- Evita que elementos que venham a seguir peguem o float anteriormente atribuído acima. [Veja CSS] -->
</div>