Add input field to Flexbox with right space on the right side - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Add input field to Flexbox with right space on the right side

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.top-row {
   width:100%;
   border:2px solid Chartreuse;
}

.tile-txt {<!--from  w  w  w  .j  av  a  2s. co  m-->
   background-color:yellow;
   margin:0 auto;
   border:2px solid blue;
   font-family:"Lato", sans-serif;
   padding:12px 11px 12px 14px;
   width:100%;
   color:pink;
   border-radius:5px;
   margin:0 6px 6px 0;
}

.tile-txt:nth-child(even) {
   margin:0 0 6px 0;
}
</style> 
 </head> 
 <body> 
  <div class="input-group" style="display: flex; justify-content: space-between; align-items: center;"> 
   <input type="text" class="tile-txt" placeholder="Box 1"> 
   <input type="text" class="tile-txt" placeholder="Box 2"> 
  </div> 
  <div class="input-group" style="display: flex; justify-content: space-between; align-items: center;"> 
   <input type="text" class="tile-txt" placeholder="Box 1"> 
   <input type="text" class="tile-txt" placeholder="Box 2"> 
  </div> 
  <div class="input-group" style="display: flex; justify-content: space-between; align-items: center;"> 
   <input type="text" class="tile-txt" placeholder="Box 1"> 
   <input type="text" class="tile-txt" placeholder="Box 2"> 
  </div>  
 </body>
</html>

Related Tutorials