Creating a two column page - html

Question

Right, so I want to create a page that has two columns and one header at the top of each one. I am using Vue.js to create this webpage. Ideally what I would want is to have the two headers at the top of the page with a gap in between and then the text and stuff below. I've tried to add the column break to make the right hand column start with the header, but it always starts a few lines below that and will not align with the other header.
As said I am using Vue.js, but I don't think that has anything to do with what I'm trying to achieve here. Please be lenient I'm very new to all this. I also tried adding the column feature in the CSS but that didn't work either.
The styles will then be stored in a different file.
I would appreciate any help on this matter. Thank you.
.commsHeaderleft {
width: 40%;
text-align: center;
}
.commsColumns {
align: left;
width: 100%;
text-align: justify;
column-count: 2;
column-gap: 40px;
}
.commsHeaderright {
width: 100%;
text-align: center;
}
<template>
<div>
<div class="commsHeaderleft">
<h1>Join us on Teamspeak!</h1>
</div>
<div class="commsColumns">
<p>--snip--</p>
<p>--snip--</p>
<p>Once installed set up a Bookmark to Air Combat Group using the following connection details and join in.</p>
<table id="tsDetails">
<tr>
<td>Address:</td>
<td>snip</td>
</tr>
<tr>
<td>Password:</td>
<td>No Password Set</td>
</tr>
</table>
<p>snip</p>
<p>snip</p>
<div class="commsHeaderright">
<h1>Check us out on Discord!</h1>
</div>
<p>snip</p>
<p>Discord is a free installation available <u>here</u></p>
<p>snip</p>
<table id="dsDetails">
<tr>
<td>Invite link:</td>
<td>https://discord.gg/snip</td>
</tr>
</table>
<br>
<p>snip</p>
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</template>

Answer 1

You can use flexbox to do that : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="page">
<div class="header">
<div class="header__item">header 1</div>
<div class="header__item">header 2</div>
</div>
<div class="content">
content
</div>
</div>
.header{
display: flex;
margin: 0 0 30px 0;
}
.header__item{
flex: 1
}