<head>
<style>
body {
    --large: 50px;
    --small: 25px;
}

.first {
    -webkit-padding-start: var(--large);
    -webkit-padding-end: var(--small);
    height: 50px;
    margin: 20px;
}

.inner {
    width: 50px;
    height: 50px;
    background-color: blue;
}

div {
    display: inline-block;
    background-color: green;
}
</style>
</head>
<body>
    <div class="first"><div class="inner"></div></div>
    <span dir="rtl"><div class="first"><div class="inner"></div></div></span>
</body>
</html>