title: How do I align my div on the y-axis, proper way? CSS/flex
body: <p>I'm trying to build a login page, and have 3 SVG images, where as 2 on the top, one one bottom right. They are all positioned absolute, where the container is displayed relative.</p>
  
  <p>Now I basically want a div that's on 30/40% of the top of the outer container. What would be the best approach to go over this? </p>
  
  <p>1) Make a div that's a fixed height, but this is not responsive and I will work with media queries.</p>
  
  <p>So it's about the blue container as displayed on the on the image, where as the red boxes do not have a height as they are abstract.</p>
  
  <p><a href="https://i.stack.imgur.com/nHaDY.png" rel="nofollow noreferrer">enter image description here</a>
  Any idea's?</p>
  
  
              
                  
                      
                  
              
  
              
                  
                      
                  
              
  
              
                  
                      
                      
                          
                              
                              
                          
                      
                  
              
  
              
                  
                      
                      
                          
                              
                              
                          
                      
                  
              
  
              
                  This div should be on 30% on the top of the height.
              
          
  
  <p>What approach would be the best for this?</p>