Align two columns in the same div horizontally-CodePudding

I need to align those two columns horizontally but it seems that all the solutions I've find are not working for me. The column on the right side will always be below the column in the left side. How can I solve it?

article {
  margin: 0 auto;
  padding-top: 80px!important;
  padding-bottom: 10%!important;
  width: 80%;
}

article:after {
  content: '';
  display: block;
  clear: left;
  margin: 0;
}

h2,
p {
  float: left!important;
  font-size: 1em;
  font-weight: normal;
}

h2 {
  text-align: start!important;
  clear: left;
  /*Move to new line*/
  width: auto;
  margin: auto;
}

p {
  margin: 0 0 0 300px;
  white-space: normal;
}

p p {
  margin-left: 300px;
  clear: left;
}

h2 p {
  text-align: start!important;
}

<article id="lyrics">
  <h2>NEWS<br>
    <br><br>31.08.2022</h2>

  <p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
    in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>

CodePudding user response：

just use flex on the <article> tag

article {
  margin: 0 auto;
  padding-top: 80px!important;
  padding-bottom: 10%!important;
  width: 80%;
  display:flex;
  justify-content:space-around;
  align-items:start;
}


#news, #date{
display:block;
text-align:center;
margin:0;
}

h2,
p {
  
  font-size: 1em;
  font-weight: normal;
}





p {
  margin: 0 0 0 300px;
  white-space: normal;
}

<h2 id='news'>NEWS</h2>
<article id="lyrics">
  <h2 id='date'>31.08.2022</h2>
  <p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
    in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>

CodePudding user response：

EDITED: Complete rehash.

The best way to display this imho is using display:table and table-cell as it aligns the columns. I've wrapped each element in a div with the class of 'container' which acts as a table row so we can put the title on the left and the lyrics on the right. The div with the class of title is the left hand column and the article section is the right hand column. This means you can have multiple paragraphs in the article.

Finally I've remmoved the white-space:pre as when writing this in an editor, the indenting is rendered on the browser. I've added br tags to provide new lines.

#lyrics {
  display: table;
  width: 600px;
  background: #FFF;
  font-size: 1em;
  font-weight: normal;
}

.container {
  display: table-row;
}

article,
.title {
  display: table-cell;
  padding: 0.5rem 0;
}

p {
  margin: 0;
  margin-bottom: 0.5rem;
}

<div id="lyrics">
  <div >
    <div >Frank:</div>
    <article>
      <p>My my my<br> My my my my my<br> My my my my<br> My my<br> I'm a wild and an untamed thing<br> I'm a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds
        rock on<br> We're gonna shake it 'till the life has gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
    </article>
  </div>
  <div >
    <div >Chorus:</div>
    <article>
      <p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
        gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>

      <p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
        gone, gone, gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
    </article>
  </div>
  <div >
    <div >Riff Raff:</div>
    <article>
      <p>Frank-N-Furter, it's all over<br> Your mission is a failure<br> Your lifestyle's too extreme<br> I'm your new commander<br> You now are my prisoner<br> We return to Transylvania<br> Prepare the transit beam</p>
    </article>
  </div>
</div>