如何更好地执行DIV和处理css

Question

First, it is a loop in React and assumed as a mobile version.

Within each loop of DIV , it will have a photo(150*150px) on the left-hand side. On the photo's right-hand side, it will have 3 div and each of the div will have a p (name, car and salary). At the bottom, it will have a line and its length will be the same as the parent div .

One special is that the p of car will have many words, when the width of the phone is not enough, it will go to the next line. If it is still not enough, it will become Tesla, Honda, BMW,...

it is the Sample Image

I really try many methods(float, position,...), but I still cant deal with it,

Here is the HTML part (using React)

<div className='loop'>
   <img className='image' src={value.image}></img>
       <div>
           <p className='title'>{value.name}</p>
       </div>
       <div class>
           <p className='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
       </div>
       <div>
           <p>{value.salary}</p>
       </div>
       <div className='linebreak'></div>
 </div>

Answer 1

Try with grid:

 .loop { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5em; width: 400px }.image { grid-row: span 3; }.linebreak { margin-top: .5em; grid-column: span 2; border: 2px solid #4f86f7; }.loop p, img { border: 2px solid #777696; margin: 0; }.title { align-self: start; }.salary { align-self: end; }

 <div class='loop'> <img class='image' src="https://picsum.photos/100" /> <p class='title'>name</p> <p class='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p> <p class='salary'>salary</p> <div class='linebreak'></div> </div>