title: Insert Html element completely right into a div with CSS (Vue)
body: <p>I have this component:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
      &lt;div horizontal-group class=&quot;filter-container&quot;&gt;
        &lt;comp-form-item :label=&quot;Date&quot;&gt;
          &lt;comp-datesrange ref=&quot;dataRange&quot;
          &gt;&lt;/comp-datesrange&gt;
        &lt;/comp-form-item&gt;
        &lt;comp-form-item label class=&quot;filter-actions&quot;&gt;
          &lt;div horizontal-group class=&quot;internal-filter-buttons&quot;&gt;
            &lt;button class=&quot;btn btn-success&quot;&gt;
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-warning&quot;&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/comp-form-item&gt;
      &lt;/div&gt;
      &lt;comp-data-grid
      &gt;&lt;/comp-data-grid&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The expected result is that the two buttons are positioned completely right on the page, but from the image you can see that they are on the right but not where I would like them to be</p>
  <p><a href="https://i.stack.imgur.com/0Fa1k.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Fa1k.jpg" alt="enter image description here" /></a></p>
  <p>This is the css:</p>
  <pre><code>&lt;style lang=&quot;scss&quot;&gt;
  .filter-container {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: 350px 350px 1fr;
    grid-template-areas: &quot;filterActions&quot;;
    margin-bottom: 30px;
  }
  .internal-filter-buttons {
    text-align: right;
  }
  &lt;/style&gt;
  </code></pre>
  <p>I tried to put float: right in place of test-align and also specify the style for the &quot;filter-actions&quot; class by inserting float: right but nothing has changed.</p>