Cannot move element higher, I want text to be aligned with image

vdff 0
Viewed 36

I am trying to align the text with my image but it ends up lower than the image, I have tried setting margin to zero, etc. and if I move the text up or down the image will follow along, I don't believe I have any code that causes this, what is the issue?

<!--HTML-->
    <div id="description">
        <img class="recipe-img" src="Images/cookie.jpeg" alt="">
        <p class="description">Mmm.. Cookies, who doesn't like these fun filled treats? Today i will show you my grandmothers recipe for the best cookies on planet earth
    </div>

CSS
.description {
    display:inline-block;
    width:300px;
    height:150px;
    border:2px;
    border-color:black;
    border-style:solid;
    border-radius:5px;
    padding:5px;
    margin-top:50px;
}

.recipe-img {
    border-radius:15px;
    display:inline-block;
    object-fit:cover;
    width:300px;
    height:150px;
    overflow:hidden;

    border:2px;
    border-style:solid;
    border-color:black;

}
image css html
2 Answers

Use Flex for your div #description just add this code in your CSS

#description {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Because this flex aligns everything to the vertically center of the div and keep space between elements.

And remove the margin-top: 50px property from your paragraph,

Codemaster United0 
#description{
     display: flex;
     align-items: center;
}
Siva Krishna0
Related