Getting 2 classes next to each other - html

Question

I am trying to get 2 classes that are under each other to get next to each other.
Here is a screenshot of the 2 classes:
The right class is .testm_boxes1. The left class is .testm_boxes2
Here is the HTML and CSS:
.testm_boxes1 {
text-align: center;
float: right !important;
}
.testm_boxes2 {
text-align: center;
float: left !important;
}
<div class="wpb_wrapper">
<h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You have a container .vc_row around each of your testm boxes.
<div class="wpb_wrapper">
<div class="vc_row other_classes">
<div class="testm_boxes1 other_classes">
content
</div>
</div>
<div class="vc_row other_classes">
<div class="testm_boxes2 other_classes">
content
</div>
</div>
</div>
You need to move the .testm_boxesX class to the .vc_row container.
<div class="wpb_wrapper">
<div class="vc_row testm_boxes1 other_classes">
<div class="other_classes">
content
</div>
</div>
<div class="vc_row testm_boxes2 other_classes">
<div class="other_classes">
content
</div>
</div>
</div>
This way the two containers can sit next to each other.
The CSS float:left and float:right will push the content to either side, but you must set a width to the floated items.
Set width: 50%; to both .testm_boxes1 and .testm_boxes2 in your CSS.
See jsfiddle with these changes applied to your code:
http://jsfiddle.net/r7yk8ao8/

Answer 2

You can place the two elements next to each other by adding one style setting that limits each elements' max width to less than half the width of the screen, like so:
max-width: 49%;
Here is a working example:
.testm_boxes1 {
text-align: center;
float: right !important;
max-width: 49%;
}
.testm_boxes2 {
text-align: center;
float: left !important;
max-width: 49%;
}
<div class="wpb_wrapper">
<h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>