I am trying to make the boxes smaller and next to each other to be in a form "box-box-box" for the entire division but, I am not sure how to approach it. I have an idea of how to do it by coding each text individually but, I was wondering if there is a faster way. Any help would be appreciated.

<div class="name">
  <label class="yyyy"></label>
  <input type="text" class="year" id="Project Name" placeholder="YYYY"> _
  <label class="sitee"></label>
  <input type="text" class="site" placeholder="Site" id="Project Name"> _
  <label class="GG"></label><input type="text" class="gg" id="Project Name" placeholder="GG"> _
  <label class="projectn"></label><input type="text" class="pn" id="Project Name" placeholder="Project Name"> _
  <label class="amountt"></label>
  <input type="text" class="amount" id="Project Name" placeholder="Amount"> _
  <label class=money></label>
  <input type="text" class="CCC" id="Project Name" placeholder="CCC">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just give them a width

Also wrap the labels around the input and remove whitespace, then we can use ::before to add the underscore on all but the last

.name input { width:45px }

.name label label::before { content: "_" }

<div class="name">
  <label class="yyyy"><input type="text" class="year" id="Project Name" placeholder="YYYY"></label><label 
  class="sitee"><input type="text" class="site" placeholder="Site" id="Project Name"></label><label 
  class="GG"><input type="text" class="gg" id="Project Name" placeholder="GG"></label><label 
  class="projectn"><input type="text" class="pn" id="Project Name" placeholder="Project Name"></label><label 
  class="amountt"><input type="text" class="amount" id="Project Name" placeholder="Amount"></label><label 
  class=money><input type="text" class="CCC" id="Project Name" placeholder="CCC"></label>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>