How can I align a title and subheading next to an image?

I'm trying to code a blog to get experience with php & html. I have a site where I list all posts from one special category, the number of them can vary.

There is a title, a subheading and a div "fakeimg" (that works as a placeholder for the pictures I haven't got yet) and I want the subheading to be underneath the title and the fakeimg to be next to them, the top side of it should be at the same height as the title is.

                             _________
title, mostly a short one   |         |   
                            | fakeimg |
the subheading, one row or  |         |
maybe two                   |_________| 

________a hr between the posts_________
                             _________
title, mostly a short one   |         |   
                            | fakeimg |
the subheading, one row or  |         |
maybe two                   |_________|

I've tried many things I've found on the internet to get them aligned like I want them to be, but somehow I didn't manage to get it work with either display: flex nor block for e.g.

here is the css for the fakeimg, the div that should contain title, subheading and fakeimg and also the divs for only the title and only the subheading.

.fakeimg {
  width: 100px 100px;
  padding: 3em 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  background-color: lightgrey;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  float: right;
  display: block;
}

 .title-and-subheading-onecat{
  margin-right: 1.5em;
  display: flex;
  align-items: start;
}

.one-post  {
  clear: both;
  margin: 0;
}

.post-description {
  margin-bottom: auto;
}

here is also the code of the page itself

<?php foreach($post as $p):?>
  <div class="title-and-subheading-onecat">
    <div class="one-post">
      <a href="http://localhost:8888/blog/public/index.php/post?id=<?php echo e($p->id); ?>">
        <?php echo (e($p['title'])); ?>
      </a>
      <br />
    </div>
    <div class="post-description">
        <?php echo nl2br(e($p['subheading']));?>
    </div>
    <div class="fakeimg">
      Image
    </div>
  </div>
<?php endforeach;?>

With the editing the fakeimg start at the same height of the title, which is what I wanted. Still a problem is that the fakeimg's should all be on the right site and have the same horizontal postition, right now it's directly next to the subheading.

I appreciate any help I get since I'm a newbie.

Solution

You have to use separate div. One for the title and subtitle and another for the image. Then specify width of both in a way so that they add up to 100%. float both of them to left so that they are beside each other. I have tweaked your code.

CSS

.img-parent {
  width: 50%;
  float: left;
}
.fakeimg {
  width: 100px 100px;
  padding: 3em 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  background-color: lightgrey;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: relative;
  display: block;
}

 .title-and-subheading-onecat{
  margin-right: 1.5em;
  display: block;
  align-items: start;
}

.one-post  {
  width: 50%;
  float:left;
}

.post-description {
  float: left;
  margin-bottom: auto;
}

HTML:

  <div class="title-and-subheading-onecat">
    <div class="one-post">
      <div class="title">
        <a href="http://localhost:8888/blog/public/index.php/post?id=1">
          asdasd asd asd asd asd asd asd
        </a>
      </div>
      <div class="post-description">
        asdasdasd asd asd ad as dasd asdas das asd asdas dasd asd asda das dasd asds
      </div>
    </div>
    <div class="img-parent">
      <div class="fakeimg">
        Image
      </div>
    </div>
  </div>

JSFiddle: https://jsfiddle.net/ashhaq12345/Lgsa0r6f/