<div> table and css problems. Doesent do what i want it to do. Seen me blind on it. Please, HELP!

[LeonLatex]

I want it to be about 300 px wide and the and to be top aligned in the right top. I have tried so much and seen me blind on all the troubles, so i have to ask  about help.
By the way. For some reason it also partly hides under the scroll bar. Can you help me, plesase?

 

<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<!--style login table start-->
<style>
.div-table {
  float: right;
  display: table;         
  width: 40%;         
         
  border: 0px solid #666666;         
  border-spacing: 0px; /*cellspacing:poor IE support for  this*/
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: right; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #cccccc;  
}
</style>
<!--style login table end-->        
<div class='w3-right w3-top'>    
<!--login table-->
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="right">E-mail</div>
                <div  class="div-table-col">Passord</div>
                 </div>
                <div class="div-table-row">
                <div class="div-table-col"><input class='w3-input w3-tiny w3-border w3-left w3-card-4' style='width: 8%;' type="text" Style="width;150px;" name="email"></div>
                    
                <div class="div-table-col"><input class='w3-input w3-tiny w3-border w3-left w3-card-4' style='width: 8%;' type="password" style="width=150px;" name="password"></div>
                <div class="div-table-col"><button class='w3-btn w3-small w3-light-grey w3-right'>LogIn</button></div>
           </div>
      </div><br>
  </form>
<!--login table end-->

Edited September 14, 2021 by LeonLatex

[Barand]

This is how your output looks in my browser window (Firefox). No idea what it's supposed to look like if that's wrong..

Your inline styles on input fields are a bit off

Both have two width settings (5% and 150px) and both the 150px settings have syntax errors

• the first has a semi-colon instead of a colon
• the second has "="

[LeonLatex]

Thats right. It looks like that. I will make a drawing and post it.

[LeonLatex]

[Barand]

Perhaps...

<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
  <form id="form1">
      <div class='w3-container w3-display-topright w3-light-gray w3-third' >
        <div class='w3-cell-row w3-padding-small'>
           <div class='w3-container w3-cell' style='width:120px'>Email</div>
           <div class='w3-container w3-cell'>
               <input class='w3-input w3-card w3-tiny' type='text' name='email'>
           </div>
        </div>
        <div class='w3-cell-row w3-padding-small'>
           <div class='w3-container w3-cell' style='width:120px'>Password</div>
           <div class='w3-container w3-cell'>
               <input class='w3-input w3-card w3-tiny' type='text' name='password'>
           </div>
        </div>
        <div class='w3-cell-row w3-padding-small'>
            <div class='w3-container w3-cell w3-right' style='width: 60%'>
                <button class='w3-btn w3-small w3-light-grey w3-border w3-right'>LogIn</button>
            </div>
        </div>
      </div>
      
  </form>

Laptop...

Mobile...