LTR and RTL <p> inline

Question

I'm trying to fit two paragraphs (LTR and RTL) inline based on the image width. So both paragraphs are in the same line, but both reads from the opposite direction. I tried to float: right the second paragraph (RTL) but it place it on top of the image.

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 Demo

Answer 1

I am sending you the required code below, and check the JS Fiddle code here.

This JS Fiddle has text alignment of LTR and RTL also.

I am now sending the New JS Fiddle

Here the width of content is fixed, and the distance between content and the images is also increased as needed.

#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;*/
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    width: 440px;
}

#content .p-ltr {
    direction: ltr;
    left: 25%;
    margin: 0 auto;
    padding-right: 30px;
    text-align: left;
}

#content .p-rtl {
    direction: rtl;
    margin: 1em auto;
    padding-left: 30px;
    text-align: right;
}

#content img {
    margin: 60px 0;
}

Regards D.