<html>
<head>
  <style>
    #outside {
        direction: rtl;
        unicode-bidi: bidi-override;
        outline: 1px dashed red;
        width: 600px;
    }
    #containingBlock { 
        display: inline;
        position: relative;
        background-color: green;
        margin: 10px;
        padding: 0 10px;
        border: 1px solid grey;
        border-left: 20px solid orange;
        border-right: 20px solid blue;
    }
    #test {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 50px;
        outline: 5px solid black;
    }
  </style>
</head>
<body>
    <p>The black outline box should be a 50px by 50px square with its bottom left corner anchored to the left <span style="color: orange;">orange</span> border on the third line.</p>
    <p id="outside">
        ILorem ipsum dolor sit amet,
        <span id="containingBlock">
            con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
            <div id="test"></div>
            ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
        </span>
        duis aute irure dolor in reprehenderit in voluptate velit.
    </p>
</body>
</html>