如何将THIS放置在Flex容器中？

Question

I'm trying to position the "register" as the picture #1... But the only thing I get is picture #2.

The pic#2 is done as we know in a flexbox, reson why is I'm making the site responsive, and the first site I did (pic#1) wasn't responsive.

I don't know if I should mix up "col-" classes to my flexbox code or what. Both pictures are tables. And the one in the flexbox is working fine when the viewport is reduced. I'm using media queries for the responsiveness, pure CSS. Not using frameworks.

How can I freely position anything in a flexbox while keeping everything responsive, if I position elements with padding and margins I won't be able positions anything else there.

This is what I want: (not a flexbox)
This is the most I can get to it: (inside the flexbox)

** CSS code for pic# 2 (flexbox childs):**

      /*flex-container*/
          #header {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color: #343434;
            top: 0;
            right: 0;
            left: 0;
            height: auto;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: .3%;
            padding-top: .3%;
            border-bottom: 1px solid white;
            z-index: 1000;
        }

    /*flex-childs*/
/*table*/    #login {
            margin-left: auto;
           }


 /*td*/      #users {
            width: 100%;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 5px black;
            border-radius: 1px;
            font-size: 12px;
            padding: 2px 2px 2px 2px;
        }

   /*td*/     #pass {
            width: 100%;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 5px black;
            border-radius: 1px;
            font-size: 12px;
            padding: 2px 2px 2px 2px;
        }



 /*td*/       #register {
            font-size: 17.5px;
        }

Answer 1

what about something like this, i wrote it from scratch didn't made it to be exactly the same but i believe the structure should be sufficient

first image (to get the full responsive affect you will need to set media query on top-row and change the justify-content: flex-start; )

https://jsfiddle.net/suunyz3e/1450/

html:

<div class="column rows-container">
<div  class="top-row row">
<div>
  <span>Register?</span>
</div>
<div>
  <span>Help Contact</span>
</div>

</div>
<div class="bottom-row row" >
  <div>
    <input type="text" placeholder="email">
  </div>
  <div>
     <input type="text" placeholder="password">
  </div>
</div>

</div>

css:

.register-box{
  display:inline-flex;
  color:#fff;
  background-color:#111;
  padding-top: 5px;
  padding-bottom: 5px; 
}
.register-box .register-title{
  margin-left:20px;
  font-weight:bold;
}
.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}
.rows-container{
    flex-wrap:wrap;
    display:inline-flex;
    color:#fff;
    background-color:#111;
    padding-top: 5px;
    padding-bottom: 5px;
}
.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.top-row{
 flex-wrap:wrap;
 justify-content: space-between;
 padding-bottom:12px;
}
.top-row span{
  padding-right:10px;
  font-size:14px;
  font-weight:bold;
  display:block;
  line-height:11px;
}
.bottom-row{
  flex-wrap:wrap;
  margin-right: 25px;
  margin-left:65px;
}

second image

https://jsfiddle.net/suunyz3e/1448/

html:

<div class="register-box column">
  <div class="top-row row">
      <div>
          <span class="register">register?</span>
      </div>
      <div>
        <span class="contact">help contact </span>
      </div>
  </div>
   <div class="bottom-row row">
      <div>
        <input type="text" placeholder="email">
      </div>
      <div>
       <input type="text" placeholder="password">
      </div>
      <div>
       <button>
       login
       </button>
      </div>
  </div>
</div>

css:

.register-box{
  background-color:#111;
  padding-top: 10px;
  padding-bottom: 10px;
 }

.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}

.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.register-box .top-row{
  flex-wrap:wrap;
  color:#fff;
  text-transform: capitalize;
  padding: 0px 18px 5px 12px;
  justify-content: space-between;
}
.register-box .top-row .register{
      font-weight: bold;
}
.register-box .top-row .contact{
         font-size: 14px;
         line-height:11px;
         font-weight: bold;
         display: block;
}

.register-box .bottom-row{
  flex-wrap:wrap;
  padding: 0px 18px 0px 12px;
}

.register-box .bottom-row input{
  margin-right:5px;
}