JSFiddle - React, Tailwind, and code Playground

HTML

<div class="device device-fixed">
    <div class="label">fixed</div>
    <div class="container">
        <div class="btn btn-circle"></div>
        <div class="btn btn-fluid"></div>
    </div>
</div>

<div class="device device-fluid">
    <div class="label">fluid with JS</div>
    <div class="container">
        <div class="btn btn-circle"></div>
        <div class="btn btn-fluid"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    font-family: sans-serif;
}
.device {
    display: inline-block;
    position: relative;
    width: 320px;
    height: 480px;
    border: 2px solid #ccc;
    margin: 30px;
    text-align: center;
}
.label {
    margin-top: 30px;
}
.container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    padding: 15px;
    background: #f7f7f7;
}
.btn {
    height: 100%;
}
.btn-circle {
    float: left;
}
.btn-fluid {
    float: right;
}

.device-fixed .btn-circle {
    width: 66px; /* easy since we know the height */
    border-radius: 33px;
    background: #2ecc71;
}
.device-fixed .btn-fluid {
    width: 205px; /* available space minus a 15px margin */
    border-radius: 33px;
    background: #27ae60;
}

.device-fluid .btn-circle {
    width: 20%; /* this needs to be equal to the height */
    border-radius: 50%;
    background: #2ecc71;
}
.device-fluid .btn-fluid {
    width: 75%; /* this needs to fill the rest of the available space minus a 15px margin */
    border-radius: 50%;
    background: #27ae60;
}

JavaScript

$(document).ready(function(){
    var height = $(".device-fluid").find(".btn-circle").height();
    var borderRadius = height / 2;
    
    $(".device-fluid").find(".btn-circle").css("width", height);
	$(".device-fluid").find(".btn-circle").css("border-radius", borderRadius);
    
    var fluidWidth = $(".device-fluid").find(".container").width() - height - 15;
    
    $(".device-fluid").find(".btn-fluid").css("width", fluidWidth);
    $(".device-fluid").find(".btn-fluid").css("border-radius", borderRadius);
});