Aligning two divs next to each other with scrollable feature - html

Question

I started to learn HTML / CSS and I am having a problem with aligning two divs in a scrollable div. For better understanding I am going to share my code. If someone can help me I am going to be really grateful. Thank you in advance.
The idea is every "Test" class to have 100% width and to be aligned one after another in a row while the class "Box" have a scrollable feature.
.Wrapper{
position:relative;
width:90vw;
background-color:blue;
}
.Box{
display;
position:relative;
width:100%
overflow-x:scroll;
}
.Test{
width:100%;
background-color:red;
}
<div class="Wrapper">
<div class="Box">
<div class="Test">
Test 1
</div>
<div class="Test">
Test 2
</div>
</div>
</div>
Best regards,
George S.

Answer 1

I'm not sure if I understood you correctly, but this is one solution to achieve it. This solution forces every child element of box to be in one row (white-space: nowrap), if it is an inline or inline-block element. Here is a jsFiddle: https://jsfiddle.net/rq98w432/1/
HTML:
<div class="Box">
<div class="Test">
Test 1
</div>
<div class="Test">
Test 2
</div>
</div>
CSS:
.Box{
width:90vw;
background-color:blue;
white-space: nowrap;
overflow-x:scroll;
color: white;
padding: 10px;
}
.Test {
display: inline-block;
width: 100%;
}