html - LTR と RTL列をなして

Question

画像の幅に基づいて、2 つの段落 (LTR と RTL) をインラインに収めようとしています。したがって、両方の段落は同じ行にありますが、どちらも反対方向から読みます。フロートしようとしました: 2 番目の段落 (RTL) を右にしますが、画像の上に配置します。

HTML:

    <div id="content">
        <h1>Title</h1>
        <p class="p-ltr">AGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
ORPOREP TATUR, OMNIMOL ESSIMEN DANIMUST, OMMO EX EX EXCEATE
SUSTO ET VOLORIT ATEST, CONSECTEM CONE RESTI NIMI,
SED QUIA PRAESEQUUNT AUT ET VERCHICID ET ODI NONSEQUI
DERESTEM. PA CULPARI BEAQUI DELES ET ENDI DOLUPTAT IN REM
VOLO VOLORUMET AUT FACESTO EARUM CUS ULLECTAS CONSERUM
SUNDIT ANT, SOLEST AUTEM NOBITATUR ACIA VENIT LANT ODITEMAGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
 </p> 
        <p class="p-rtl">AGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
ORPOREP TATUR, OMNIMOL ESSIMEN DANIMUST, OMMO EX EX EXCEATE
SUSTO ET VOLORIT ATEST, CONSECTEM CONE RESTI NIMI,
SED QUIA PRAESEQUUNT AUT ET VERCHICID ET ODI NONSEQUI
DERESTEM. PA CULPARI BEAQUI DELES ET ENDI DOLUPTAT IN REM
VOLO VOLORUMET AUT FACESTO EARUM CUS ULLECTAS CONSERUM
SUNDIT ANT, SOLEST AUTEM NOBITATUR ACIA VENIT LANT ODITEMAGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA..</p>
        <img src="images/intro_7.jpg" width="950" height="560">
    </div>

CSS:

#content {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 10%;
    z-index: -10;
}

#content img {
    opacity: 0.75;
}

#content img:hover {
    opacity: 1;
}

#content h1 {
    color: black;
    font-size: 3vw;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
    margin-bottom: 5%;
}

#content p {
    position: relative;
    width: 350px;
    margin-bottom: 5%;
    font-size: 12px;
    line-height: 14px;
}

#content .p-ltr {
    text-align: left;
    left: 25%;
    direction: ltr;
}

#content .p-rtl {
    text-align: right;
    /*left: 56.5%;*/
    direction: rtl;

}

JSFiddleデモ