How to always place upload field right side next to preview file in Dropzone?

Currently I have a customized dropzone that I styled on my own. However, after uploaded a file, I want the upload field is always right side next file preview, just like this:

enter image description here

But by the default dropzone always places the upload field left side to the file preview as in my current script below.

$(document).ready(function() {

  var previewNode = document.querySelector('.upload-thumbnail');
  previewNode.id = "";

  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);


  default_dz_option = {
    url: '/upload',
    method: "post",
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    timeout: 0,
    previewTemplate: previewTemplate,
    previewsContainer: '.thumbnail-container'
  };

  myDropzone = new Dropzone('#upload_field', default_dz_option);

});
.thumbnail-container {
  padding: 0 10px;
}

.upload-thumbnail {
  background: #E7F3FF;
  color: #1977F2;
  padding: 5px 16px 5px 7px;
  border-radius: 50px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-grow: 0;
  min-width: 100px;
  position: relative !important;
  margin-right: 8px;
  margin-bottom: 10px;
  position: relative;
}

.upload-thumbnail {
  font-size: 10px;
}

.upload-thumbnail a {
  font-size: 11px;
  text-decoration: none;
}

.upload-thumbnail span {
  font-size: 11px;
}

.upload-thumbnail .remove-thumbnail {
  transform: translateX(5px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-10/css/all.min.css" integrity="sha512-Pv1WJMqAtVgNNct5vhq+4cgkKinKpV1jCwSWD4am9CjwxsJSCkLWKcE/ZBqHnEE1mHs01c8B0GMvcn/pQ/yrog==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<div class="thumbnail-container" style="display: flex;flex-wrap: wrap;margin-top: 10px;position: relative;width: 600px;">
  <div class="upload-thumbnail" style="margin-right: 30px;">
    <div class="image">
      <i class="fa fa-paperclip" aria-hidden="true"></i>&nbsp;&nbsp;
      <a href="javascript:" class="image-name" data-dz-name></a href="javascript:">
    </div>
    <a href="javascript:" class="remove-thumbnail" data-dz-remove><i class="fas fa-times "></i></a>
  </div>
  <div class="" id="upload_field" style="width: 36px; height: 36px; border: 1px dashed; "> </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js" integrity="sha512-oQq8uth41D+gIH/NJvSJvVB85MFk1eWpMK6glnkg6I7EdMqC1XVkW7RxLheXwmFdG03qScCM7gKS/Cx3FYt7Tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

How can I achieve that like in the picture? Thanks so much.