Div next to two vertical aligned divs - html

Question

I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.
I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.
It should look like this:
This is what I have so far:
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Have a look at my fiddle

Answer 1

It's better to wrap your right side div(.info) with a parent div.
Try this one , it could help
.wrapper{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
background-color: #fffdea;
width: 100%;
padding: 10px;
}
.icon {
border: 1px solid lightgreen;
width: 30%;
}
.right-set {
width: 75%;
}
.info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border: 1px solid aqua;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="right-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>

Answer 2

try this
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
.wrapper {
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon {
border: 1px solid lightgreen;
width: 130px;
margin: 5px;
}
.info-set {
width: 100%;
}
.info {
border: 1px solid aqua;
display: flex;
justify-content: space-between;
margin: 5px 5px 5px 0;
}

Answer 3

Something needs to have a height set, either the wrapper or the icon. I also set height 50% of the info divs and changed box-sizing to border box for the contained elements.
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
height: 130px;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
box-sizing: border-box;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
height: 50%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>

Answer 4

Can be achieved using Flexbox and wrapping the info divs in a container.
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-container">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
CSS :
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon{
border: 1px solid lightgreen;
width: 30%;
min-height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
}
.info-container{
display: flex;
width: 70%;
box-sizing: border-box;
flex-direction: column;
}
.info{
border: 1px solid aqua;
}

Answer 5

You could also attempt to use css Grid.
.wrapper {
display: grid;
/*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
grid-template-columns: 1fr 5fr;
}
.icon {
background: #a03;
/*Run the icon div in two rows height but take one track width as the rest*/
grid-row: span 2;
}
.info {
background: #bccd03;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>