Display two div in same line or row

Question

I want to display these two div in the same line.

Here my HTML code :

<div class="row">
   <div class="col p-0 dossier-detail-btn" style="text-align: right;">
      <div style="display: inline-flex;width:100%">
         <button class="demo-button excercice-create-btn mdc-button font-Roboto-Medium mdc-button--raised mdc-ripple-upgraded" style="box-shadow: none;color: #0047FD;text-align:left;border: rgba(0, 0, 0, 0.3) 1px solid;background-color: white;margin: 0 10px;border-radius: 4px;" data-DebutActivite="@(doss.DateDebutActivite.Value.ToString("dd/MM/yyyy"))" data-item="@(TnsHelper.Crypt (doss.Id.ToString ()))">
         CR&Eacute;ER UN EXERCICE
         </button>
      </div>
      <div style="display: inline-flex;">
         <div class="col-auto">
            <span style="vertical-align: middle;line-height: 1;font-size: 14px;color: rgba(0,0,0,0.6);font-family: roboto-medium;" onclick="checkSupprimerDossier('@(Url.Action("Delete", "Dossier"))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">SUPPRIMER</span>
         </div>
         <div class="col-auto">
            <span style="vertical-align: middle;line-height: 1;font-size: 14px;color: rgba(0,0,0,0.6);font-family: roboto-medium;" onclick="checkDupliquerDossier ('@(Url.Action("Dupliquer", "Dossier", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">DUPLIQUER</span>
         </div>
         <button class="demo-button mdc-button mdc-button--raised mdc-ripple-upgraded" style="background-color:#0047FD !important;margin: 0 10px;border-radius: 4px;" onclick="checkOpenDossier ('@(Url.Action("Index2", "Exercice", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
         OUVRIR LE DOSSIER
         </button>
      </div>
      <div>
      </div>
   </div>
</div>

Answer 1

So I did strip off the inline styles and non bootstrap classes, but here's an example of how to accomplish what you're after. If I can offer any advice, it's to work on dropping the habit of working around what frameworks like bootstrap are for. Read the documentation and you'll quickly see how much effort and extra lines of bloat you could be saving just by learning how to use it.

Either way, hope this helps and happy holidays!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col p-0">
    
      <button 
        data-DebutActivite="@(doss.DateDebutActivite.Value.ToString("dd/MM/yyyy"))"
        data-item="@(TnsHelper.Crypt (doss.Id.ToString ()))">
         CR&Eacute;ER UN EXERCICE
      </button>
    
    </div>
    <div class="col-auto">
    
      <span onclick="checkSupprimerDossier('@(Url.Action("Delete", "Dossier"))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
      SUPPRIMER
      </span>
      
    </div>
    <div class="col-auto">
    
      <span onclick="checkDupliquerDossier ('@(Url.Action("Dupliquer", "Dossier", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
        DUPLIQUER
      </span>
    
    </div>
    <div class="col-auto p-0">
    
      <button 
        onclick="checkOpenDossier ('@(Url.Action("Index2", "Exercice", new { idDossier = TnsHelper.Crypt (doss.Id.ToString ()) }))','@(Url.Action("CheckPwd", "Dossier"))','@(TnsHelper.Crypt (doss.Id.ToString ()))', '@(!string.IsNullOrEmpty (doss.PWDDossier) ? "true" : "false" )')">
         OUVRIR LE DOSSIER
      </button>
      
    </div>
  </div>
</div>