HTML/CSS - Left Align and center on same line

Question

I want to left align some text and center another Text on the same line in HTML and CSS. I also want a margin-left on the left-aligned text.

This is my current approach:

HTML:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1>CENTER</h1>
</div>

CSS:

.align-left {
  float: left;
  margin-left: 20px;
}

#wrapper {
  text-align: center;
}

This works with left and right align, but the margin also pushes the centered text. I think this is because the float: left keeps the left-aligned text in the page flow.

Thank you really much :)

Answer 1

Use like this

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left {
    text-align:left;
    padding:0;
    margin:0;
    position:absolute;
}

h1.align-center{
  text-align: center;
}
</style>

Other way:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left{
    padding:0;
    margin:0;
    position:absolute;
}
#wrapper {
    text-align:left;
}

h1.align-center{
  text-align: center;
}
</style>

Answer 2

My two cents.

CSS code:

h1{
  display: inline-block;
}
#center{
  text-align: center;
  width: 80%;
}

#wrapper {
  width: 100%;
}

HTML code:

<div id="wrapper">
  <h1 id="left">LEFT</h1>
  <h1 id="center">CENTER</h1>
</div>