<style>
  .filecheckbox {
    margin: 0px;
    min-width: 20px
  }

  .filekey {
    min-width: 200px;
  }

  .filevalue {
    flex-grow: 1;
    width: 25%;
    min-width: 200px;
  }

  .filenumberbox {
    min-width: 50px;
    flex-grow: 1;
  }

  .filetitle {
    border-top-style: dotted;
    flex-grow: 1;
  }
  .fileentryouter {
    flex-grow: 1;
    width: 100%;
  }
</style>

<div class="subtitle">Files:</div>
<div class="flexcontainer">
  <div class="filekey">Total Size</div>
  <div id="filetotalsize" class="filevalue"></div>
</div>
<div class="flexcontainer">
  <div class="filekey">Used Size</div>
  <div id="fileusedsize" class="filevalue"></div>
</div>
<div class="flexcontainer">
  <div class="filekey">Free Size</div>
  <div id="filefreesize" class="filevalue"></div>
</div>
<br>

<div class="flexcontainer"  style="border-left-style: double; border-right-style: double; border-top-style: double;">
  <div class="subtitle" >Upload:</div>
</div>
<div class="flexcontainer" style="border-left-style: double; border-right-style: double;">
  <div class="flexcontainer">
    <div class="filekey">
      File:
    </div>
    <input id="fileuploadfile" class="filevalue" type="file">
  </div>
  <div class="flexcontainer">
    <div class="filekey">
      Name:
    </div>
    <input id="fileuploadname" class="filevalue" type="text">
  </div>
</div>
<div class="flexcontainer" style="border-left-style: double; border-right-style: double; border-bottom-style: double;">
  <button id="fileuploadbtn" class="subtitle">Upload</button>
</div>
<br>
<div class="flexcontainer" style="border-left-style: double; border-right-style: double; border-top-style: double;">
  <div class="subtitle">List:</div>
</div>
<div id="fileList" class="flexcontainer" style="border-left-style: double; border-right-style: double; border-bottom-style: double;">
</div>