Dfyjkt

.cell 
 width: 100px;
 height: 30px;
 border: 1px solid black;


.padding 
 background-color: #3D9970;
 width: 10px;
 float: left;
 height: 30px;
 position: absolute;
 left: 55px;
 padding-right: 1px;

<div class="cell">
 <div class="cell1"></div>
 <div class="padding"></div><span style="display: inline;">	
 </div>

.cell
 display:block;
 width: 100px;
 height: 30px;
 position:relative;

.cell:before
 content:'';
 background-color: #3D9970;
 width: 10px;
 top:0;
 left:calc(50% - 5px);
 height: 100%;
 position: absolute;

.cell:after
 content:'';
 border: 1px solid black;
 width:100%;
 height:100%;
 display:block;
 top:0;
 left: 0px;
 position: absolute;

<div class="cell">

</div>

var chargeElement = document.getElementById("charge");

// To set a charge to the battery, simply call: setCharge(percentage)

function setCharge(percentage) 

 var left;
 var width;

 if (percentage > 100) percentage = 100;
 if (percentage < 0) percentage = 0;
 
 chargeElement.setAttribute("data-value", percentage);

 // If the charge is 50%, simply draw a line
 if (percentage == 50) 
 chargeElement.className = "middle";
 else 
 chargeElement.className = "";
 

 // Otherwise, adjust left and width values
 if (percentage >= 50) 
 left = 50;
 width = percentage - left;
 else 
 left = percentage;
 width = 50 - left;
 

 // Then update the charge style.
 chargeElement.style.left = left + "%";
 chargeElement.style.width = width + "%";



// A simple function to add / remove some charge

function addCharge(percentage) 
 var value = parseInt(chargeElement.getAttribute("data-value"));
 value += percentage;
 setCharge(value);


// Here just some stuff for illustration.
// You don't need those functions to set the charge.

function letsBeginTheShow(buttonElement) 
 buttonElement.disabled = true;
 setNextCharge(10);


function setNextCharge(increment) 
 var percentage = parseInt(chargeElement.getAttribute("data-value"))
 percentage += increment;
 if (percentage > 100) 
 percentage = 100;
 increment = -5;
 
 if (percentage < 0) 
 percentage = 0;
 increment = 5;
 
 setCharge(percentage);
 setTimeout(function() 
 setNextCharge(increment);
 , 50);


setCharge(50);

.battery 
 position: relative;
 width: 100px;
 height: 30px;
 border: 1px solid black;
 /* Below : only for aestethic reasons */
 float: left;
 margin-right: 30px;
 /* End of aesthethic stuff */


#charge 
 height: 100%;
 position: absolute;
 background-color: #3D9970;
 border-color: #3D9970;


.middle 
 border-left: 1px solid;

<div class="battery">
 <div id="charge" data-value="50" class="middle"></div>
</div>

<button onclick="letsBeginTheShow(this)">Begin the charge variation</button>