title: How to display element on the right between elements using css
body: <p>I have element 1, element 2, element 3 on may page, how can i place <strong>element3</strong> on right top below <strong>element1</strong> in right top?
  It should looks like on the screen below:
  <a href="https://i.stack.imgur.com/SVHSN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SVHSN.png" alt="enter image description here"></a></p>
  
  <p>I read a lot of examples but it didn't work for me,
  i have tried to use </p>
  
  <p><code>position: absolute;
   float: right;
  </code></p>
  
  <p>with position: absolutel it places this element on the top of the page but i don't want it,
  the maximum i achievedit's right bottom position
  <a href="https://i.stack.imgur.com/jq4A8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jq4A8.png" alt="enter image description here"></a>
  Also i tried to use:</p>
  
  <pre><code>margin-top: -150px;
  </code></pre>
  
  <p>it didn't help neither, while minimizing windows it becomes a mess:
  <a href="https://i.stack.imgur.com/B033f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B033f.png" alt="enter image description here"></a></p>
  
  <p>Please help me to solve this issue ?</p>
  
  <p>Edited:
  <strong>1999,19,1600+,8</strong> is <code>.hero-fact-title</code>,
  <strong>Founded in Helsinki, Offices, Digital Natives, Design Studios</strong> is <code>.hero-fact-description</code>, <code>.fact-summary</code> is that <strong>text</strong> i want to move also it <strong>element3</strong>.</p>
  
  <pre><code> .fact-wrapper {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 3px;
    //display: inline-block;
  
    &amp;__hero-fact-title {
      width: 90px;
      height: 42px;
      font-family: MaisonNeue;
      font-size: 32px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      letter-spacing: -1px;
      color: #333333;
    }
  
    &amp;__hero-fact-description {
      width: 193px;
      height: 22px;
      font-family: MaisonNeue;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      letter-spacing: normal;
      color: #333333;
    }
  }
  .fact-summary {
    width: 596px;
    height: 96px;
    font-family: MaisonNeue;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #333333;
    float: right;
  }
  </code></pre>
  
  <p>to display this mess on page i use the code below:</p>
  
  <pre><code>&lt;div className="fact-wrapper"&gt;
      {facts.map(obj =&gt; {
        return (
          &lt;div&gt;
            &lt;div className="fact-wrapper__hero-fact-title"&gt;{obj.title}&lt;/div&gt;
            &lt;div className="fact-wrapper__hero-fact-descriptio"&gt;
              {obj.description}
            &lt;/div&gt;
          &lt;/div&gt;
        )
      })}
    &lt;/div&gt;
    &lt;h2 className="fact-summary"&gt;{factSummary}&lt;/h2&gt;
  </code></pre>