How to achieve this layout properly?

layout design
page layout design
graphic design layout principles
types of page layout
document layouts
page layout design templates
graphic design layout rules
what are the elements of layout

I want to have list items with a layout like below, with a circle that has an image, at right of the circle a title, the date of the post and then the category of the post. And at right of the list item should appear the button.

I have this code to achieve this layout using flexbox: http://jsfiddle.net/muLh5v4n/2/. But its not working properly, the title, post date and category are not at the right of the image, are below the image.

HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="bg-custom-gray-dark">
      <div class="container py-5">
        <div class="row">
          <div class="col">
            <ul class="list-group list">
              <li class="list-group-item bg-custom-light2 py-4">
                <div class="row align-items-center">
                  <form class="col-5">
                    <div class="form-group">
                      <div class="input-group list_search">
                        <div class="input-group-prepend">
                          <span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
                        </div>
                        <input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
                      </div>
                    </div>
                  </form>
    
                  <div class="col-7 text-right">
                    <div class="dropdown filters mr-3">
                      <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Filter 2 <i class="fa fa-angle-down"></i>
                          </a>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Action</a>
                      </div>
                    </div>
                    <div class="dropdown filters">
                      <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Filter2 <i class="fa fa-angle-down"></i>
                          </a>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Action</a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="list-group-item d-flex align-items-center">
                <div class="post-info">
                  <img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
                  <h3>Title of the post</h3>
                  <span>post date</span>
                  <span>Categorqy of the post</span>
                </div>
                <div class="post-button ml-auto">
                  <button>Read</button>
                </div>
              </li>
              <li class="list-group-item">item2</li>
              <li class="list-group-item">item3</li>
              <li class="list-group-item">...</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

You can try using this; you can further style the elements; but basically this component should display as you intend. Also this is using only Bootstrap Classes, custom css is only for the example.

.list-item {
   max-width: 450px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-item border d-flex align-items-center">
   <div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
   <div class="ml-2">
      <h3>Title</h3>
      <p>some-text</p>
      <span>Span</span>
   </div>
   <div class="ml-auto mr-2"><button>Button</button></div>
</div>

How to create balanced page layouts, Page layout typically involves a lot of placement, rearranging and formatting of elements. Many designers approach this process organically,  Layout in graphic design deals with the arrangement of visual elements so as to achieve specific communication objectives. When designing, the graphic designers should rely on the required information to present the layout properly, such as rotating and resizing the images, which requires time and efforts.

This is another aproach.

ul {
     list-style-type: none;
     width: 500px;
     border: 1px solid gray;
     margin: 0;
     padding: 0;
}

.picture_round{
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: 20px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dsp_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle_section{
  flex: 1;
  text-align: left;
}

ul li button{
  margin-right: 20px;
}

ul li{
  padding: 10px 0px;
  border-bottom: 1px solid blue;
}

.title {
  text-transform: uppercase;
  font-weight: bolder;
}

.category{
  border: 1px solid gray;
  border-radius: 10px; 
  display: inline-block;
  padding: 5px 2px;
}
<ul>
	<li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">title</div>
				<div class="description">lorem ipsum ipsum</div>
				<div class="category"> category </div>
			</div>
			<button>Button</button>
		</div>
	</li>
	<li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">title</div>
				<div class="description">lorem ipsum ipsum</div>
				<div class="category"> category </div>
			</div>
			<button>Button</button>
		</div>
	</li>
  <li>
		<div class="dsp_flex">
			<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
			<div class="middle_section">
				<div class="title">titletitle title</div>
				<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
				<div class="category"> categorycategory </div>
			</div>
			<button>Button</button>
		</div>
	</li>
</ul>

Get the perfect website layout in 27 steps, On this page we explore how to get started and the key steps in the design workflow, and on page 2 you'll find general advice for approaching  A properly planned plant layout aims at achieving the following objectives: To achieve economies in handling of raw materials, work in- progress and finished goods. To reduce the quantum of work-in-progress. To have most effective and optimum utilisation of available floor space.

Bootstrap 4 has a class called .flex-row that we can use.

Lets do this using only Bootstrap classes and flex.

1. Add flex-row class to the list-group-item.

2. Add d-flex to post-info.

3. Place the text into a d-flex flex-column div.

<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
    <img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
    <div class="d-flex flex-column">
        <h3>Title of the post</h3>
        <span>post date</span>
        <span>Categorqy of the post</span>
    </div>

</div>
<div class="post-button ml-auto">
    <button>Read</button>
</div>

JSFiddle: http://jsfiddle.net/muLh5v4n/13/

You can later on use Bootstraps built in padding classes to make it space out nicely.

Beginning Graphic Design: Layout and Composition, Within graphic design layout is a building block. Also within graphic There's no one way to use white space correctly, but it's good to understand its purpose. Applies to 2018.1 Update and later Display one or more scaled views of your design on a standard-size drawing sheet called a layout. After you finish creating a model at full size, you can switch to a paper space layout to create scaled views of the model, and to add notes, labels, and dimensions. You can also specify different linetypes and line widths for display in paper space

Introduction to CSS layout, The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way  efficiency of organization. An efficient layout can reduce unnecessary material handling, help to keep costs low, and maintain product flow through the facility. The layout is the major consideration in Operations management because a poor layout does not contribute for overall efficiency and productivity of organization.

Card Games Properly Explained: Poker, Canasta, Cribbage, Gin , (Note that if all the cards in the layout have been taken with a sweep, the next player is forced to discard, thus starting a new layout.) 5. Achieving a coup, by  To convert an existing layout to a constraint layout, follow these steps: Open your layout in Android Studio and click the Design tab at the bottom of the editor window. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout. Create a new layout. To start a new constraint layout file, follow these steps:

The Importance Of Layout In Graphic Designs, It is believed that layout is of paramount importance in graphic designs. of visual elements so as to achieve specific communication objectives. should rely on the required information to present the layout properly, such as  A Layout can choose to cache layout-related information, such as the preferred extent of each of the children. The flushCache parameter tells the Layout to flush cached data. Since a Layout controls the size and placement of widgets in a Composite, there are several methods in Composite that are used with Layouts.

Comments
  • Thanks, do you know why there is more space between the paragraph and span than the space between the title and the paragraph?
  • That's because by default paragraphs have a small margin-bottom, you can remove it with CSS or adding mb-0 class to the paragraph :)
  • This really does work, I'd just say try to use as many bootstrap classes only as possible to avoid overriding too much CSS, many of the classes you added are available in bootstrap out-of-the-box, which helps keep the html a lot cleaner
  • Why is not working? I just gave him an option without using bootstrap. I am a little negative about it and i try to make my own classes that i reuse and build everything from scratch.
  • I didn't say this is not working, I actually said it DOES work.. Just that since OP is using Bootstrap, it'd be easier to use classes already available in bootstrap :) it is a good solution to use if Bootstrap is not available though
  • Oh, I just misread ! Sorry about that ! I try to avoid bootstrap because first of hand, i don't understand the classes and second, i cannot remember them :)).
  • It's easly for me to build from 0 than using Bootstrap