css - 将标题与图像对齐并在图像和内容之间添加边距不起作用

Question

我想实现这样的布局:

但它不能正常工作，我得到这个:http://jsfiddle.net/9cfqjmkb/ .标题应该与图像的顶部对齐，但它不起作用。你知道为什么吗？

此外，我希望图像与带有标题和发布日期的其他 div 之间有一些边距，如上图所示，但边距不起作用。你知道为什么吗？

HTML

<div class="container">


  <div class="row">
    <div class="col-3">
      <div class="bg-custom-light2 p-0">
        <h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
        <ul class="list-group">

          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

?

.list-group {
  width:300px;
}

.ml-2 {
  align-self:flex-start;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


  <div class="row">
    <div class="col-3">
      <div class="bg-custom-light2 p-0">
        <h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
        <ul class="list-group">

          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>