Properly align tags

 [ci skip]

pwman/ui/templates/index.tpl

@@ -31,28 +31,79 @@
   </nav>
   
   <section class="container password-box" style="margin-top: 7rem; ">
-  <div class="">  
+  Login: <strong>oz.tiram@gmail.com</strong>
+  <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
+  <br>Password: <strong>********</strong><br>  
+  Notes: Some notes about this entry 
+  <br>
   
-  </div> 
+   <div class="tags float-right">
+    Tags: 
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
+    </div>
   </section>
   <section class="container password-box">
+  <div>
   Login: <strong>oz.tiram@gmail.com</strong>
   <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
   <br>Password: <strong>********</strong><br>  
   Notes: Some notes about this entry 
   <br>
-  
-   <div class="tags">
+   <div class="tags float-right">
+    Tags: 
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
+    </div>
+  </div>  
+  </section>
+  <section class="container password-box">
+  Login: <strong>oz.tiram@gmail.com</strong>
+  <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
+  <br>Password: <strong>********</strong><br>  
+  Notes: Some notes about this entry 
+  <br>
+   <div class="tags float-right">
+    Tags: 
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
+    </div>
+  </section>
+  <section class="container password-box">
+  Login: <strong>oz.tiram@gmail.com</strong>
+  <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
+  <br>Password: <strong>********</strong><br>  
+  Notes: Some notes about this entry 
+  <br>
+   <div class="tags float-right">
     Tags: 
-     <button>net</button>
-     <button>learning</button>  
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
     </div>
   </section>
   <section class="container password-box">
-  kkkkkkkkkkkkkkk
+  Login: <strong>oz.tiram@gmail.com</strong>
+  <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
+  <br>Password: <strong>********</strong><br>  
+  Notes: Some notes about this entry 
+  <br>
+   <div class="tags float-right">
+    Tags: 
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
+    </div>
   </section>
   <section class="container password-box">
-  kkkkkkkkkk
+  Login: <strong>oz.tiram@gmail.com</strong>
+  <br>Website:<strong><a href="stackoverflow.com">http://stackoverflow.com</a></strong>
+  <br>Password: <strong>********</strong><br>  
+  Notes: Some notes about this entry 
+  <br>
+   <div class="tags float-right">
+    Tags: 
+     <button class="button button-clear button-clear button-tag">net</button>
+     <button class="button button-clear button-tag">learning</button>  
+    </div>
   </section>
 </main>
 

pwman/ui/templates/static/css/style.css

@@ -352,6 +352,8 @@ img {
   border: 0.1rem solid #D1D1D1;
   border-radius: 0.4rem;
   margin-bottom: 1rem;
+	padding-top: 2rem;
+  padding-bottom: 4rem;
 }
 
 .container-nav {
@@ -362,9 +364,10 @@ img {
 .tags {
 
   height: 10%;
-  position: absolute;
+  position: relative;
+	margin-top: 0;
+	padding-top: 0rem;
 	top: 80%;
-  left: 60%;
 }
 
 .password-box strong {
@@ -374,3 +377,7 @@ img {
 .tag-button {
   
 }
+
+.button-tag {
+  padding: 0px 0px;
+}