Put two divs one near the other - html

Question

I have the following html code:
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
and the css/less:
.rtm {
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
position: absolute;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
}
I tried to do like this in order to show the page-icon and page-title one near the other but how it is done now they are one over the other (the icon is on top of the title)
How can I solve this? Thanks

Answer 1

When you say "near each other" I am assuming you mean "beside each other".
You can add flexbox properties to #crumby-title. Then remove position and float properties from .page-icon and page-title. You can also remove height from .page-title
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart {
padding-top: 50px;
}
#crumby-title {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
font-size: 20px;
font-weight: 5px 10px 10px 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>

Answer 2

Give float:left to .page-icon instead of position:absolute and add <div class="clear"></div> after page-title.
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
float: left;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
.clear{
clear:both;
}
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
<div class="clear"></div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>

Answer 3

I want to show u another version of ankita pantel's put them in a table and add padding-top to Demand
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
padding-top: 30px;
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
<div class="demand page">
<div id="crumby-title">
<table>
<tr>
<td>
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
</td>
<td>
<div class="page-title">
Demand
</div>
</td>
</tr>
</table>
</div>
<div id="chart" class="demand-chart">
</div>
</div>

Answer 4

All the cool kids are using flex box.
display:flex; flex-direction:row; makes the child items stack in a row. (flex-direction:row is default so you can skip that)
#crumby-title {
...
display: flex;
flex-direction:row;
}
then you can (if you want) center the text with
.page-title {
....
display: flex;
align-items: center;
}
Fiddle