JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="col-xs-12 col-lg-4">
            <div class="panel panel-chart">
                <div class="panel-heading naranja">
                    <h3 class="panel-title">Panel</h3>
                </div>
                <div class="panel-body">
                    <p>Title</p>
                    <div class="col-xs-12 col-lg-12">
                        <div class="progress-line azul part-one" style="width:70%"></div>
                        <div class="progress-line amarillo part-two" style="width:30%"></div>
                    </div>
                </div>
            </div>
        </div>
  </div>

CSS

.panel-chart{
    border-color: #ddd;
    margin-top: 10px;
}
.panel-title{
    color:white;
}
.azul{
    background-color: #2776C1;
}
.naranja{
    background-color: #F7824D;
}
.amarillo{
    background-color: #fdc46b;
}
.verde{
    background-color: #28C286;
}
.rojo{
    background-color: #E66361;
}
.progress-line{
    height: 40px;
}
.btn-monto{
    margin: 10px;
}
.part-one{
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px; 
    display: inline-block;
}
.part-two{
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    display: inline-block;
}

.panel-body .col-xs-12{
  display:flex;
}