I need help to make a vertical resize bar

Question

My question is simple, I have three divs, which are visually horizontal, but I would like to leave them as same aspect, but vertically. I'm a beginner, I researched and tried to do it myself, but I could not. Follow the code:

.note-icon-bar {
    width: 20px;
    margin: 1px auto;
    border-top: 1px solid #a9a9a9;
}

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>  
  </div>
</div>

I would like to leave these three small bars vertically for me to make a resize bar.

Answer 1

you can simplify your code and use one div (2 border + 1 linear-gradient) then adjust the needed values:

.note-icon-bar-v {
  box-sizing:border-box;
  height: 20px;
  width: 7px;
  margin: 1px auto;
  border-right: 1px solid #a9a9a9;
  border-left: 1px solid #a9a9a9;
  background: linear-gradient(#a9a9a9, #a9a9a9) 2px 0/1px 100% no-repeat;
}
.note-icon-bar-h {
  box-sizing:border-box;
  width: 20px;
  height: 7px;
  margin: 10px auto;
  border-top: 1px solid #a9a9a9;
  border-bottom: 1px solid #a9a9a9;
  background: linear-gradient(#a9a9a9, #a9a9a9) 0 2px/100% 1px  no-repeat;
}

<div class="note-icon-bar-v"></div>
<div class="note-icon-bar-h"></div>

Answer 2

That is what you want? Mainly it is using float

.note-resizebar { 
  position: relative; 
  clear: both;
}
.note-resizebar .note-icon-bar {
    width: 20px;
    margin: 1px 2px;
    border-top: 1px solid #a9a9a9;
    height: 30px;
    background: #999999;
    
    display: inline-block;
    float: left;
}

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>  
  </div>
</div>