* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 50px auto;       
    border: 1px solid #ccc;  
  }
  
  
  .block {
    position: absolute;
    width: 50%;
    height: 50%;
  }
  
  
  .top-left {
    top: 0;
    left: 0;
    background-color: red;
  }
  
  .top-right {
    top: 0;
    left: 50%;
    background-color: blue;
  }
  
  
  .bottom-left {
    top: 50%;
    left: 0;
    background-color: blue;
  }
  
  
  .bottom-right {
    top: 50%;
    left: 50%;
    background-color: red;
  }
  
  
  .small-rect {
    position: absolute;
    background-color: red; 
    width: 60px;           
    height: 20px;         
  }
  
  
  .small-rect-top {
    top: 0;
    left: 75%;
    transform: translateX(-50%);
    background-color: red;
    
  }
  
  
  .small-rect-bottom {
    bottom: 0;
    left: 25%;
    transform: translateX(-50%);
    
    background-color: red;
  }