How to center the div one on the center and one on the right corner side using flex box;

Question

This is my HTML Code in which I have one header and inside that, I have two divs, which I want to align one in the center and one in right

<Header class="header">
     <h1>This is a heading</h1>
     <div>this is my div</div>
</Header>

I Tried this solution in css i'm trying to wrap the header in flex box so that both item can place side by side

using sass

  .header {
    display: flex;
    justify-content: center;
    div {
        justify-self: right;
    }
}

Example with SaSS converted to CSS

.header {
  display: flex;
  justify-content: center;
}

.header div {
  justify-self: right;
}

div { border: 1px solid black; }

<Header class="header">
  <h1>This is a heading</h1>
  <div>this is my div</div>
</Header>

Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=flex+center and right+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Sep 05 '22 at 15:15
I want one h1 to be on the center and div to be on the right side — Rahul Pratap Singh, Sep 05 '22 at 15:16
Looks like what you ask is what you get - see the snippet I made. you need to justfy the text in the div vertically if you want the text in it to be aligned with the H1 — mplungjan, Sep 05 '22 at 15:18
No that's not what i mean i want the div in the right corner — Rahul Pratap Singh, Sep 05 '22 at 15:21
So update the question with that information. If you want the div in the TOP right corner, then EITHER take it out of the header OR make it `position: absolute; top: 0; right: 0` — mplungjan, Sep 06 '22 at 06:47

0 Answers0