Image Height is distorted - css

Question

I'm creating a resume website. I'm adding content to the Job.js component, and I'm encountering an issue with logo. The height seems to expand when the desc exceeds the height of the component. If the desc is short, I do not have this issue. I'm also not having this problem when flex-direction is column.
I tried adjusting padding-bottom of .job-container img, but while the image returned to normal, there was unwanted padding at the bottom.
Relevant Code
Job.js
import React from 'react';
import '../css/Job.css';
function Job(props) {
console.log(props.name);
const jobList = props.job.map(j =>
<div className='job-container'>
<img src={j.logo} alt={j.alt} />
<div className='description'>
<div>
<a href={j.link} rel='noopener noreferrer' target='_blank'>
{j.companyName}
</a>
</div>
<div>{j.title}</div>
<div>{j.duration}</div>
<div>{j.location}</div>
<div>{j.desc.map(paragraph => <p>{paragraph}</p>)}</div>
</div>
</div>
)
return (
<div>{jobList}</div>
);
}
export default Job;
Job.css
:root {
--image-spacing: 30px;
}
.job-container {
border: 2px solid red;
padding: 0px 5%;
display: flex;
flex-direction: row;
}
.job-container img {
border: 2px solid red;
border-radius: 3px;
display: block;
height: auto;
width: 35%;
}
.job-container .description {
line-height: 1.45;
padding-left: var(--image-spacing); /* Change this. */
}
.job-container a {
color: black;
text-decoration: none;
}
/* Responsive Mode */
#media only screen and (max-width: 768px) {
.job-container {
/* Line up description and image. */
flex-direction: column;
}
.job-container img {
border-radius: 3px;
margin: auto;
width: 75%;
}
.job-container .description {
padding-left: 0px;
padding-top: var(--image-spacing);
}
}
.content {
display: block;
}

Answer 1

I solved this problem by adding align-self: start; to .job-container img.