Edit in JSFiddle

<html>
    <head>
        <title>Side-by-side floats</title>
        <!-- Put your CSS here -->
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        
        <!-- Part 2: Lay out the the two books side by side --> 
        <div class="pride-and-prejudice">
            <h2>Pride and Prejudice</h2>
            <p>It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.</p>
    
            <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</p>
    
            <p>“My dear Mr. Bennet,'' said his lady to him one day, “have you heard that Netherfield Park is let at last?”</p>
        
        </div>
        <div class="pride-and-prejudice-and-zombies">
            <h2>Pride and Prejudice and Zombies</h2>
            <p>It is a truth universally acknowledged that a zombie in possession of brains must be in want of more brains. Never was this truth more plain than during the recent attacks at Netherfield Park, in which a household of eighteen was slaughtered and consumed by a horde of the living dead.</p>
    
            <p>“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is occupied again?”</p>
        </div>
        
    </body>
    
</html>