title: I would like to hide my outer div if inner div is empty
body: <p>I have two div a child and a parent. the child contains a contact number. If there is no contact number I want the parent div to display none. I am trying to use the <code>:empty</code> CSS statement but I think I am using the wrong logic.</p>
  <pre class="lang-css prettyprint-override"><code>#inter #inter-content:empty {
      display:none;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;inter&quot; class=&quot;telephone&quot;&gt;Intl: &lt;div id=&quot;inter-content&quot;&gt;{{contact_number_international}}&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  <p>I'm not sure if CSS is the right route either. I have tried using the bottom as well:</p>
  <pre class="lang-css prettyprint-override"><code>#inter + #inter-content:empty {
      display:none;
  }
  </code></pre>