title: Placing logo with links inline
body: <p>I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.</p>
  <pre><code>&lt;a href=&quot;https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb&quot;&gt;
          &lt;img src=&quot;https://colab.research.google.com/assets/colab-badge.svg&quot; alt=&quot;Open In Colab&quot;/, width=150, height=150/&gt;&lt;/a&gt;
  
  &lt;a href=&quot;https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb&quot;&gt;
      &lt;img src=&quot;https://mybinder.org/badge_logo.svg&quot; alt=&quot;Open In mybinder&quot;/, width=150, height=150/&gt;&lt;/a&gt;
  </code></pre>
  <p>What I have tried so far?</p>
  <ol>
  <li>I tried to put the logo in a div and then tried to align it to left using css</li>
  <li>I tried to place the logo with link in a list</li>
  </ol>
  <p>None of them worked! The logos right now looks like this
  <a href="https://i.stack.imgur.com/Vj5WW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vj5WW.png" alt="logos" /></a></p>
  <p>What I am trying to achieve?
  I want the logo to be inline separated by space placed from left to right</p>