Ciao, static è il valore di default per position, quindi in quell'esempio non ottieni nulla. Piuttosto dovresti usare il valore absolute per quell'elemento, in modo che sia tolto fuori dal regolare flusso dei contenuti e possa essere poi posizionato con le relative proprietà di posizionamento: top, right, bottom e left.

Considera inoltre che un elemento con position absolute resta comunque relativo al suo contenitore più prossimo che ha un valore diverso da static (o al body, se non ne viene trovato uno).
Vedi indicazioni riportate nella documentazione:
absolute: The element is positioned relative to its first positioned (not static) ancestor element
fonte: https://www.w3schools.com/cssref/pr_class_position.asp

Per tale motivo può essere necessario applicare position relative all'elemento contenitore (quindi al div form-grup che contiene l'elemento .outside). Questo valore, in questo caso, non avrà alcun effetto sul posizionamento del contenitore, se non quello di creare appunto una relazione riguardo il posizionamento dei propri elementi discendenti.

Per praticità puoi usare la classe position-relative di bootstrap da applicare direttamente al markup per il div contenitore.
Mentre per l'elemento .outside puoi impostare left:100% in modo che risulti adiacente al lato destro del contenitore, come da tua immagine allegata.

Riepilogando:

- nel markup HTML
codice:
<div class="form-group row position-relative">
- nel CSS
codice:
.outside{
   position: absolute;
   left: 100%;
}




PS: l'argomento è più che altro pertinente a CSS, piuttosto che HTML 5. Esiste una sezione specifica per CSS, avresti dovuto postare in quella. Ti prego di prestare maggiore attenzione la prossima volta. Per il momento segnalo di spostare la discussione.

Buon proseguimento.