Two divs 50% width as squares - html

Question

How can I make two divs like these?
If the gray area becomes small, the two divs maintain the appearance.
In the red box I can use box-sizing: border-box; and padding: 50% 0;, but in the blue box I need to put text.
.c {
padding: 10px;
background-color: gray;
overflow: auto;
margin: 0 0 10px 0;
}
.c1 {
width: 300px;
}
.c2 {
width: 200px;
}
.w {
width: 100%;
}
.w div {
float: left;
}
.i {
width: 50%;
height: 50px;
background-color: red;
}
.t {
width: 50%;
height: 50px;
background-color: blue;
}
<div class="c c1">
<div class="w">
<div class="i"></div>
<div class="t"></div>
</div>
</div>
<div class="c c2">
<div class="w">
<div class="i"></div>
<div class="t"></div>
</div>
</div>

Answer 1

Something like this?
.square {
box-sizing: border-box;
padding: 50% 50% 0 0;
width: 50%;
float: left;
position: relative;
}
.image {
background: red;
}
.text {
background: blue;
}
.text > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: white;
padding: 50% 0;
line-height: 0;
text-transform: uppercase;
}
<div class="wrap">
<div class="square image"></div>
<div class="square text">
<div>text</div>
</div>
</div>

Answer 2

.square{
width: 50%;
position: relative;
float: left;
}
.square:before{
content: '\0020';
padding-top: 100%;
display: block;
}
.boxer{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#c1{
background: salmon;
}
#c2{
background: lightblue;
}
#image{
width: 100%;
height: 100%;
position: relative;
}
.centered{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: -webkit-translate(-50%, -50%);
-moz-transform: -moz-translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div id="container">
<div class="square">
<div class="boxer" id="c1">
<img id="image" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
</div>
</div>
<div class="square">
<div class="boxer" id="c2">
<p class="centered">
You can put your text here!
I you don't like to have it centered,
remove class centered!
</p>
</div>
</div>
</div>