将列表与图像和两个文本组件对齐

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<ul>
  <li>
    <img src="image.jpg" alt="Image" />
    <div>
      <h3>Title 1</h3>
      <p>Description 1</p>
    </div>
  </li>
  <li>
    <img src="image.jpg" alt="Image" />
    <div>
      <h3>Title 2</h3>
      <p>Description 2</p>
    </div>
  </li>
  <li>
    <img src="image.jpg" alt="Image" />
    <div>
      <h3>Title 3</h3>
      <p>Description 3</p>
    </div>
  </li>
</ul>

ul {
  display: flex;
  list-style: none;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

h3, p {
  margin: 0;
}