Flexbox only working in chrome - html

Question

i'm trying to achieve a two column div where the one is fixed and the other one is stretched to fill rest. For this i've at the moment used a flexbox, however i've found out that it does not work in safari and IE 10. So how can i achieve the same result without flexbox?
http://jsfiddle.net/LLExL/4086/
.stat-result {
border: 1px solid #ddd;
width: 100%;
display: flex;
margin-bottom: 20px !important;
}
.stat-result .stat-meta {
float: left;
width: 100%;
min-height: 40px;
border-right: 1px solid #ddd;
}
.stat-result .result-meta {
float: left;
width: 100px;
height: 100%;
text-align: center;
}
.stat-result .result-meta i {
font-size: 50px;
line-height: 80px;
}
.stat-result .stat-meta .stat-row {
width: 100%;
height: 50%;
border-bottom: 1px solid #ddd;
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.stat-result .stat-meta .stat-row span {
line-height: 40px;
font-weight: 700;
font-family: Oswald;
text-transform: uppercase;
}
.stat-result .stat-meta .stat-row1 {
width: 100%;
height: 50%;
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.stat-result .stat-meta .stat-row1 span {
line-height: 40px;
}
<div class="stat-result">
<div class="stat-meta">
<div class="stat-row">
<span>Titan Vs. Mousesports</span>
</div>
<div class="stat-row1">
<span>1.35</span>
<span style="float: right;">Test</span>
</div>
</div>
<div class="result-meta">
<i class="fa fa-check-circle"></i>
</div>
</div>

Answer 1

You are lacking all the flexbox prefixes. According to caniuse you can actually use flexbox for safari and IE10.
Updated Fiddle http://jsfiddle.net/LLExL/4088/
And css
.stat-result {
border: 1px solid #ddd;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-bottom: 20px !important;
}
Edit: I'd like to recommend using gulp/grunt and an autoprefixer to automatically prefix your css.

Answer 2

If you don't want to use flexbox, you can use table-cell property to achieve the same.
.stat-result {
border: 1px solid #ddd;
width: 100%;
display: table;
margin-bottom: 20px !important;
}
.stat-result .stat-meta {
display:table-cell;
width:calc(100% - 100px);
min-height: 40px;
border-right: 1px solid #ddd;
}
.stat-result .result-meta {
display: table-cell;
width: 100px;
height: 100%;
text-align: center;
}
FIDDLE DEMO