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>
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>