Placing 2 Divs on the Same Line when Using "Order" in Flexbox Without Adjusting the HTML M-CodePudding

I'm using a plugin called Divi Blog Extras which is using "Order" in CSS to position DIV containers. I am attempting to put two divs (.post-meta and .post-categories) next to each other now that I've corrected the order so it matches my customer's designs, but I am struggling to get them next to each other.

I have tried floats, inline styles, and flexing, but nothing seems to affect how they position themselves. It looks like something that should be relatively straightforward yet I cannot get these to line up as they should.

Do you have any suggestions I could use (without absolutely positioning these - unless that's the only way)?

This is the DEMO website where to code can be seen (blog article item):

CodePudding user response：

You can move both of those items into a new and then style that div to position them side by side

<div style="
  display: flex;
  justify-content: start;
">
  <p >...</p>
  <div >...</div>
</div>

CodePudding user response：

Well you can get this result.

By doing the following:

Put the p tag inside the div.
From this:

<p > <span ><span ></span>2 min read</span></p>

<div ><a href="https://miles.birdhouse-demos.com/category/mental-health/" target="_self" rel="category term tag" >Mental Health</a></div>

To this:

<div ><a href="https://miles.birdhouse-demos.com/category/mental-health/" target="_self" rel="category term tag" >Mental Healthggg</a>|<p ><span ><span ></span>2 min read</span></p></div>

And changing some styles, from this:

categories {
    width: 48%!important;
    padding: 0!important;


.et_pb_post_extra.el_dbe_block_extended .post-meta {
    border-top: none;
    padding: 10px 0 0 5px!important;

}

To this:

categories {
    width: 100%!important;
    padding: 0!important;


.et_pb_post_extra.el_dbe_block_extended .post-meta {
    border-top: none;
    padding: 10px 0 0 5px!important;
    display:inline;

}