JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container{
    display:flex;
    flex-direction:row;
}

.container:nth-child(odd) .text {
  margin-right: 30px;
}

.container:nth-child(even) .text {
  margin-left: 30px;
}

</style>

<div class="container">
    <div class="text">On this DIV the margin between the text and the icon is correct.</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i></div>
</div>

<div class="container" style="direction:rtl">
    <div class="text">On this RTL DIV the margin between the text and the icon is missing because the margin parameter is <b />margin-right</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i><div>
</div>