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  src="Images/cookie.jpeg" alt="">
        <p >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;

}

CodePudding user response：

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,

CodePudding user response：

#description{
     display: flex;
     align-items: center;
}