<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;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            outline: 5px solid black;
        }
    </style>
</head>
<body>
    <p>The black outline box should stretch from the right <span style="color: blue;">blue</span> border, to the left <span style="color: orange;">orange</span> border.</p>
    <p id="outside">
        ILorem ipsum dolor sit amet,
        <span id="containingBlock">
            con a pariatur.
            <div id="test"></div>
            duis aute
        </span>
        irure dolor in reprehenderit.
    </p>
</body>
</html>