title: Detect if the html element is being pushed to the new line on zoom or windows larger text size
body: <p>I have 2 labels side by side and because of the system text size 150%(which is recommended) in the windows, the second label is not having enough space and it floats below. I just want to just find out if the second label is going into the new line or not using javascript or css. So that I can change the 1st label accordingly.</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-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;label class="form-label fw-bold"&gt;testing out label1&lt;/label&gt;
  &lt;label (click)="method()" class="float-end fw-bolder"&gt;
          &lt;em class="fas fa-exclamation-circle"&gt;&lt;/em&gt;
          testing label 2 testing
        &lt;/label&gt;</code></pre>
  </div>
  </div>
  
  when the label2 is being pushed below, I want to remove the text &quot;testing out&quot; from label1.<br />
  Note: the browser will be on 100% zoom only when the windows is having text size of 150%.</p>