How to add post meta like this

Hi there,

Is that just for single posts?

Yes it's for single posts not for Archives.

Hi there,

I would remove the current styling you have (margin, border etc..), then do this:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
}

.single .entry-meta .posted-on {
    order: 1;
}

.single .entry-meta .byline {
    order: 2;
}

.single .entry-meta .comments-link {
    order: 3;
}

.single .entry-meta > * {
    padding: 0 10px;
}

I have added code as you mentioned but it's looking something different. The author's image is so big and the Meta sections are too big. I don't want the author's image too. I need exactly as shown in the previous attached image. Here is the link post-implementation of this code: https://ibb.co/27FNyW7

You'll need to remove the custom code you've added to add the image in the first place.

If you remove that code, the result should be very close to what you're wanting.

Thanks got the same result. I just need all the text inside meta to be bold and there should be some more margin between Title & Meta. That's it. Another problem I observe is that the meta look and feel breaks on the Blog Archive page. It looks like this: Amol ChavanOctober 24, 2020. The Author name & Date are touching each other. I need some space between them too.

Update this CSS:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
}

to:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
    margin-top: 1.5em; /* add space between title and meta */
    font-weight: 700; /* Increase font weight */
}

Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author's name & Date are touching each other. I need some space between them too.

Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author's name & Date are touching each other. I need some space between Author name and Date: Amol ChavanOctober 24, 2020

Try this CSS:

body:not(.single) .entry-meta > * {
    margin-right:  10px;
}

Increase the 10px to make a large space.

Thanks, this ticket is resolved

Glad to hear that