Aligning Image with Text

I am currently having a go at building the personal portfolio and cannot figure out how to align my image with a paragraph. Below is the HTML code I have used, I just cannot work out the correct CSS to style it, after trying different methods I’ve reached a stand still.
I want it to display like:
About me
Text Image

Any help is appreciated!

 <About Me Section>
        <main>
        <section class="about-me" id="about_me">
            <h2 id="aboutmetitle">About Me</h2>
            <p id="aboutmetext"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".</p>
            <img id="aboutmeimage" src="resources/profile.jpg">
        </section>

Consider wrapping your text in a <div> and floating the <div> left, and the <img> right:

<style>
#aboutmeimage {
    float:right;
}

.about-text {
    float:left;
}
</style>

<main>
    <section class="about-me" id="about_me">
        <div class="about-text">
            <h2 id="aboutmetitle">About Me</h2>
            <p id="aboutmetext"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".</p>
        </div>
        <img id="aboutmeimage" src="resources/profile.jpg" />
    </section>
</main>
2 Likes