How to align 2 divs parallel to each other - html

Question

I am trying to align to divs parallel from each other, but it is not lining up properly.
I have already tried a number of the solutions posted on the site, but none of them are working.
Any ideas on how to resolve this issue would be appreciated.
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="content">
<div class="wrapper">
<p class="content-media left">
<img src="http://lorempixel.com/g/400/200/" alt="">
</div>
<div>
<div class="col-xs-12">
<div class="float:right;width:45%;">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum</em>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
body {
font-family: georgia, "times new roman", times, serif
}
.container {
width: 100%;
}
.container p,
.container div img {
display: inline-block;
}
.container p {
width: 60%;
float: right;
}
.container div img {
width: 38%;
float: right;
}
.logo {
position:fixed;
bottom: 25px;
left: 0px;
height: 100px;
width: 300px;
}
p {
font-size: 18px;
line-height: 22px;
margin-right: 360px;
right: 100px;
}
.dropcap {
float: left;
font-size: 76px;
line-height: 76px;
margin: 0 15px 5px 0;
}
.section {
background-color: #fff;
position: relative;
z-index: 10;
}
.section-header {
margin-top: 50px
!important;
z-index: 1;
}
.section-header-content {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.main-title {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.section-header-content2 {
position: fixed;
bottom: 50px;
left: 200px;
color: white;
}
.main-title2 {
position: fixed;
bottom: 400px;
right: 200px;
color: white;
}
.section-video-bg {
margin-top: -10px;
}
.content {
padding: 40px 0 25 ;
}
.content h3 {
font-size: 27px;
line-height: 27px;
margin: 70px 0 30px 0;
}
.content .content-media {
width: 40%;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding: 30px 0;
}
.content .content-media.right {
float: right;
margin-left: 20px;
}
.content .content-media.left {
float: right;
margin-right: 800px;
bottom: 600px;
}
.content .content-media img {
max-width: 100%;
}
.column {
float: left;
width: 50%;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container video {
position: relative;
z-index: 0;
top: 0;
bottom: 0;
}
.video-container video.fixed {
position: fixed;
top: 50px;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.wrapper {
margin: 0 auto;
width: 960px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
}

Answer 1

You have a lot of stray divs on your html as well as a lot of css properties not needed (e.g. float property) which are already done by bootstrap's default css.
Here is the correct way to nest your div columns within a row:
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="content">
<div class="wrapper">
<img src="http://lorempixel.com/g/400/200/" class="img-responsive" alt=""/>
</div>
</div>
</div>
<div class="col-xs-6">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum.</p>
</div>
</div>
</div>
</section>
Here is a jsfiddle with the above code: http://jsfiddle.net/AndrewL32/623ftfc2/

Answer 2

Your HTML is not properly formatted
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-6">
<img class="img-responsive" src="http://lorempixel.com/g/400/200/">
</div>
<div class="col-xs-2 col-sm-2 col-md-6">
<p>Lorem Ipsum</p>
</div>
</div>
https://jsfiddle.net/j0m6ddpo/1/