Make div appear next to other - html

Question

I have started a huge revision on my css knowledge.
I am trying to do the following:
I want to create a wrapper div that contains to divs with some text and some content.I want each div with class item-2 inside that div to have a width:50%
and appear next to another item-2.
Here is a snippet of my code:
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
text-align:center;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
As you can see it's div appears below its previous div.However I want them to be next to each other.How can I achieve this? I would like an explanation to your solution sa as to improve my knowledge

Answer 1

Flex can keep them in one row.
.wrapper {
display: flex;
}
And remove display: inline block for items. If you want in small devices they are under each other add this to .wrapper
flex-wrap: wrap;
And we need a min-width for items. .items: min-width: 250px;. If your device has enough space (500px) they will remain in one line, else the second item goes to next line.

Answer 2

.wrapper display: flex;
.item-2 flex: 1;

Answer 3

Why is this happening?
Using inline-block in this way is perfectly valid and will work but you have two issues that are causing the elements to occupy separate lines:
inline-block items honour the white-space between elements so there is an extra space between the two .item-2 divs
The width of .item-2 is not 50% but 50% + 2px left border + 2px right border
How to fix
There are multiple ways of getting round the white-space issue including setting font-size: 0;, however, as the height and width of .demo use ems you are probably best removing the white-space from between the elements in the HTML instead
To ensure .item-2 actually has a width of 50% you can add box-sizing: border-box; which will make the width and height include the padding and border
body {
background: rgba(10, 10, 10, .8);
}
.wrapper {
margin: auto;
position: relative;
width: 100%;
}
.item-2 {
border: 2px solid blue;
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 50%;
}
.demo {
background: yellow;
height: 5em;
margin: auto;
width: 5em;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div><!--You can remove the white-space by adding a comment between the elements
--><div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>

Answer 4

Try this code...
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
float:left;
text-align:center;
box-sizing: border-box;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>

Answer 5

aside float and flex, there's also:
display:table;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:table;
table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
text-align:center;
display:table-cell;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
display:grid;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:grid;
grid-template-columns:50% 50%;
}
.item-2{
text-align:center;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>