CSS align text left and right

Question

I have this:

<div style="background-color: #25a0da; color: White; margin: 0">
  <h1 style="margin: 0  20px; padding: 0; line-height: 52px;">
    <span style="display: flex; justify-content: flex-start"><asp:Literal ID="litDateRange4" runat="server"></asp:Literal></span>
    <span style="display: flex; justify-content: flex-end"> <asp:Literal ID="litPendingProfit" runat="server"></asp:Literal></span>
  </h1>
</div>

I want the first span to be snapped to the left, and the second one to the right, which is working however they appear on different lines.

Quite new to flex.

score 4 · Accepted Answer · edited Aug 30 '19 at 14:05

I want the first span to be snapped to the left, and the second one to the right

You can use the flexbox layout model to achieve that.

h1 {
  display: flex;
  justify-content: space-between;
}

<div style="background-color: #25a0da; color: White; margin: 0">
  <h1 style="margin: 0  20px; padding: 0; line-height: 52px;">
    <span style="display: flex; justify-content: flex-start">aaa</span>
    <span style="display: flex; justify-content: flex-end"> bbb</span>
  </h1>
</div>

score 0 · Answer 2 · answered Aug 30 '19 at 13:32

0

You could add

justify-content: space-between

to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

answered Aug 30 '19 at 13:32

ekbrothers

54
6

CSS align text left and right

2 Answers2