title: Move text inside the same <p> when a class is already applied?
body: <p>I'm trying to re-format an EPUB using the PDF format of the same book as a model using Calibre. I found this: <a href="https://i.stack.imgur.com/tGPWt.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/tGPWt.jpg</a></p>
  
  <p>I want to: Make the text on the right look the same as the one on the left.</p>
  
  <p>The EPUB is like this:</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.calibre {
    display: block;
    font-size: 1em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt;
  }
  
  .p2 {
    text-indent: 1.5em;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version='1.0' encoding='utf-8'?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""&gt;
  
  &lt;body class="calibre"&gt;
  
    &lt;p class="p2"&gt;It was hard to not watch his Status Page like a hawk (which apparently lived in the mountain areas), but he watched  his  level  slowly  rise  over  the  course  of   the cycle. &lt;/p&gt;
    
    &lt;p class="p2"&gt;Level 19.02  –  A Red Wolf.&lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.08  –  Three more Red Wolves.&lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.13  –  Some Psycho Killer Bees guarding a Blue Chest with a  &lt;i class="calibre3"&gt;Pretty Rock&lt;/i&gt; in it.&lt;/p&gt; 
  
    &lt;p class="p2"&gt;Level 19.22  –  An  Undead  Swordsman  and  his Skelemaidens. &lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.29  –  A pack of  Fish Otters. &lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.38  –  A very angry-looking Stump. &lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.45  –  Three more Red Wolves. &lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.57  –  Some Psycho Killer Bees guarding a Blue Chest with a  &lt;i class="calibre3"&gt;Pretty Rock&lt;/i&gt; in it. (He had gotten turned around at some point and had ended up going in a circle.)&lt;/p&gt;
  
    &lt;p class="p2"&gt;Level 19.66   –  A trip back to kill some Heat Pigs in the Salazarm Desert for more &lt;i&gt;Desert Bacon. &lt;/i&gt;&lt;/p&gt;
    
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just want to change the part after the " - ". On the PDF, it doesn't continue under 'level 19.XX'. If I try to change the text-align using span or something similar it doesn't work. I don't know what to do anymore.</p>
  
  <p>I hope I managed to explain it well. Any ideas?</p>
  
  <p>EDIT: I'll expand the code to what it looks like:</p>