如何正确地为头像图像上的文本编写HTML和CSS？
How to correctly write the HTML and CSS for an avatar image with text to the right of it?

 .resume { width: 584px; height: 65px; font-family: Bitter; font-size: 48px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .text { width: 699px; height: 262px; font-family: Lato; font-size: 24px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 2; letter-spacing: normal; color: #575159; } .logo-box { justify-content: center; } .logo { width: 146px; height: 146px; border-radius: 80px; border: solid 1px #979797; } .job { width: 561px; height: 41px; font-family: Bitter; font-size: 30px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .company { width: 560px; height: 53px; font-family: Lato; font-size: 20px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .year { width: 418px; height: 22px; font-family: Lato; font-size: 18px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .show-more { width: 181px; height: 19px; font-family: Lato; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #92719e; } .flex-wrap { display: flex; } .flex-wrap .content { margin-left: 20px; } 

 <div class="resume">My Resume</div> <div class="text">Lorem ipsum . . . </div> <div class="flex-wrap"> <div class="logo-box"> <div class="logo"></div> </div> <div class="content"> <div class="job">Director of Web Development</div> <div class="company">ABCD Company</div> <div class="year">1999 - 2010</div> <div class="show-more">SHOW MORE</div> </div> </div> 

 .container { display: grid; grid-template-columns: 150px auto; grid-column-gap: 20px; } img { width: 100%; } 

 <div class="container"> <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="" /> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus ligula, semper nec pretium nec. </p> </div> </div> 

 .resume { width: 584px; height: 65px; font-family: Bitter; font-size: 48px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .text { width: 699px; height: 262px; font-family: Lato; font-size: 24px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 2; letter-spacing: normal; color: #575159; } .logo-box { justify-content: center; margin-right:10px; } .logo { width: 146px; height: 146px; border-radius: 80px; border: solid 1px #979797; } .job { width: 561px; height: 41px; font-family: Bitter; font-size: 30px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .company { width: 560px; height: 50px; font-family: Lato; font-size: 20px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .year { width: 418px; height: 22px; font-family: Lato; font-size: 18px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .show-more { width: 181px; height: 19px; font-family: Lato; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #92719e; } .flex_item { display:flex; align-items:center; } 

 <div class="resume">My Resume</div> <div class="text">Lorem ipsum . . . </div> <div class="flex_item"> <div class="logo-box"> <div class="logo"></div> </div> <div class="flex-details"> <div class="job">Director of Web Development</div> <div class="company">ABCD Company</div> <div class="year">1999 - 2010</div> <div class="show-more">SHOW MORE</div> </div> </div>