title: markdown / html: keep indent for second line after colon
body: <p>The task is to put text in colored blocks (background-color, padding, round corner, border-line, etc.). Within the block, on Example 2 Explanation, the second line should automatically keep the indents and align after the colon on the first line. The output I want is shown in the image below if my explanation isn't clear enough. </p>
  
  <p>I'm writing in <strong>Jupiter notebook</strong>. Markdown syntax and html can be recognized. I'm not sure how to make css work?</p>
  
  <p>I've seen some questions here very related but their answer doesn't work for me. Such as: How to keep indent for second line in ordered lists via CSS?</p>
  
  <p><a href="https://i.stack.imgur.com/g9vXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g9vXr.png" alt="enter image description here"></a></p>
  
  <h2>My attempt</h2>
  
  <p>The best I can do is shown below, however it has problems.</p>
  
  <ol>
  <li><p>I used <code>&lt;pre&gt;</code> tag which indents the entire block but I don't know how to remove. (No one on the internet seems to have this problem and I start to wonder if it's because I code on Jupiter notebook??)</p></li>
  <li><p>the second line of <strong>Explanation</strong> in <code>Example 2</code> doesn't align after the colon on the first line.</p></li>
  </ol>
  
  <p>This is an old problem and I pretty much gave up after several hours' attempt. Sorry for the late update.</p>
  
  <p><a href="https://i.stack.imgur.com/GUIND.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GUIND.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;p&gt;&lt;strong&gt;Example 1:&lt;/strong&gt;&lt;/p&gt;
  &lt;pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;"&gt;
  &lt;strong&gt;Input:&lt;/strong&gt; "42"
  &lt;strong&gt;Output:&lt;/strong&gt; 42
  &lt;/pre&gt;
  
  &lt;p&gt;&lt;strong&gt;Example 2:&lt;/strong&gt;&lt;/p&gt;
  &lt;pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;"&gt;
  &lt;strong&gt;Input:&lt;/strong&gt; "   -42"
  &lt;strong&gt;Output:&lt;/strong&gt; -42
  &lt;strong&gt;Explanation:&lt;/strong&gt; The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42.
  &lt;/pre&gt;
  </code></pre>