How do I put 2 columns beside each other - html

Question

How to I get the two columns to go beside each other. The first one will have text and the 2nd one will be a list. This is the header section and might have a background image. I'm using bootstrap v3.3.4, HTML5 and CSS3
I have attached an image of what I'm trying to accomplish.
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.about-us {
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}
.about-us h2 {
font-size: 650%;
font-weight: 400;
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
}
.about-us .block {
position: relative;
padding: 340px 0px 0px;
z-index: 99;
text-align: center;
}
NEW CODE:
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow- duration="900ms">
<h2>sample</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
<h1>sample</h1>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.about-us {
background-image:linear-gradient(rgba(18, 172, 234, 0.42), rgba(0, 191, 255, 0.55)),url(background-about-header.png);
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}
#about-us h1 {
font-size: 400%;
font-weight: 400;
text-transform: none;
color: #fff;
text-align: justify;
margin: auto;
text-shadow: 2px 2px 1px rgba(56, 56, 56, 0.73);
}
.about-us h2 {
font-size: 750%;
font-weight: 400;
text-transform: uppercase;
color: #fff;
line-height: 80px;
padding-top: 70px;
padding-right: 20%;
margin: auto;
text-shadow: 3px 3px 2px rgba(56, 56, 56, 0.73);
}
#about-us .block {
position: relative;
padding: 205px 0px 0px;
text-align: center;
margin: auto;
}
Media Query
#about-us .block {
padding: 0px;
}
#about-us h1 {
text-align: justify;
margin-left: 20%
}
#about-us h2 {
padding-top: 150px;
padding-bottom: 30px;
margin-left: 10%
}
#media only screen and (max-width: 767px) {
.about-us h1,h2 {
font-size: 16px;
}

Answer 1

display:flex or display:table or display:inline-block can do this :
display:flex
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row,.col-md-6 {
display:inline-flex;
align-items:center;
justify-content:center;
}
.col-md-6 {
flex:1;
padding:1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
& display:table
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin:auto;
}
.row {
display:table;
table-layout:fixed;
}
.col-md-6 {display:table-cell;
vertical-align:middle;
text-align:center;
padding:1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>
& display:inline-block
.about-us h2 {
/*font-size: 650%;
font-weight: 400;*/
margin-bottom: 0px;
text-transform: uppercase;
color: #666;
margin: auto;
}
.col-md-6 {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 1em;
}
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
<h2>WE ARE</h2>
</div>
</div>
</div>
</div>
</div>
</section>