How can I bring two content boxes together on the same line? - html

Question

at the moment I have two content boxes which are placed on seperate lines and they are not connected. If possible, I would like to bring these two boxes to be the same on the same line as one another and then add padding to the sides of these boxes. An example has been shown in the image below of what I have currently and what I would like to have.
My code is as follows:
HTML -
<h1 id="LogInHeader">LOGIN</h1>
<div class="form-group">
<input type="text" id="txtGRC" placeholder="Email Address">
<input type="text" id="txtGRC" placeholder="Password">
</div>
<button type="submit" id="GenerateReportButton" class="btn btn-default">SECURE LOGIN</button>
<p id="LogInForgottenPassword" style="color:white">Forgotten Password</p>
</form>
</content>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a href="#carousel-example" data-slide="prev">
</a>
<a href="#carousel-example" data-slide="next">
</a>
</div>
CSS -
.carousel-content {
color:black;
display:flex;
align-items:center;
text-align: center;
}
#carousel-example{
width: 500px;
height: 200px;
}
#CarouselHeader{
font-weight: bold;
font-size: 18px;
}
#CarouselText{
font-size: 11px;
color: #6d6e70;
}
#CarouselLink{
font-size: 12px;
text-decoration: underline;
}
#CarouselLink a:link{
color: #4f7f64;
}
#LogInForgottenPassword{
color: white;
font-size: 11px;
text-decoration: underline;
padding-bottom: 25px;
}
#LogInHeader{
color: white;
font-weight: bold;
font-size: 22px;
padding-top: 40px;
}
#LogInMain {
border-color: red;
border-radius: 25px;
color: white;
}

Answer 1

Use display and give it the setting inline-block:
http://www.w3schools.com/cssref/pr_class_display.asp
It is also possible with the float property:
http://www.w3schools.com/cssref/pr_class_float.asp

Answer 2

As you are already using the display: flex option in your code, let's take that and use it.
.container {
display: flex;
}
.item {
height: 100px;
border: 1px solid #333;
flex: 1;
flex-direction: row;
/* flex-direction: row is the initial value */
}
<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>

Answer 3

Use following
.inl{ border-width:thick;
border-style:dashed;
border-color:Black;
display:inline-block;
width:100px;
}
<div class="inl">abc
</div>
<div class="inl">abc
</div>
}

Answer 4

.carousel-inner { display: flex; justify-content: space-between; }
.carousel-inner .item { width: 25%; }
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div> REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>