JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opera</title>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="Wrapp">
    <div class="insertedDiv"></div>
    <div class="insertedDiv_2"></div>
</div>

<div class="Wrapp_2">
    <div class="insertedDiv_2-1"></div>
    <div class="insertedDiv_2-2"></div>
</div>
</body>
</html>

CSS

.Wrapp{
direction: rtl;
overflow: hidden;
background-color: yellow;
height: 70px;
padding-top: 10px;
}

    .insertedDiv{
    width: 200px;
    height: 50px;
    background-color: green;
    margin-left: 20px;
    display: inline-block;
    }
    
    .insertedDiv_2{
    display: inline-block;
    /* margin-right: 20px; */
    width: 200px;
    height: 48px;
    border: 1px solid black;
    }

.Wrapp_2{
direction: rtl;
overflow: hidden;
background-color: yellow;
height: 70px;
margin-top: 25px;
padding-top: 10px;
}    

    .insertedDiv_2-1{
    width: 200px;
    height: 50px;
    background-color: green;
    margin-left: 20px;
    float: right;
    }
    
    .insertedDiv_2-2{
    float: right;
    width: 200px;
    height: 48px;
    border: 1px solid black;
    }