CSS Flexbox

    <style>
      #box-container {
        height: 500px;
        display: flex;
      }
      
      #box-1 {
        background-color: dodgerblue;
        width: 50%;
        height: 50%;
        
      }
    
      #box-2 {
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      header {
        display: flex;
      }
      header .profile-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 4px;
      }
      header .profile-name {
        display: flex;
    <style>
      #box-container {
        display: flex;
        height: 500px;
        
      }
      #box-1 {
        background-color: dodgerblue;
        width: 50%;
        height: 50%;
      }
    
      #box-2 {
        background-color: orangered;
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      header {
        display: flex;
        flex-direction: row;
      }
      header .profile-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 4px;
      }
      header .profile-name {
    <style>
      #box-container {
        display: flex;
        height: 500px;
        
      }
      #box-1 {
        background-color: dodgerblue;
        width: 50%;
        height: 50%;
      }
    
      #box-2 {
        background-color: orangered;
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      header, footer {
        display: flex;
        flex-direction: row;
      }
      header .profile-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 4px;
      }
      header .profile-name {
    <style>
      #box-container {
        background: gray;
        display: flex;
        height: 500px;
        
      }
      #box-1 {
        background-color: dodgerblue;
        width: 25%;
        height: 100%;
      }
    
      #box-2 {
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      header, footer {
        display: flex;
        flex-direction: row;
      }
      header .profile-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 4px;
      }
      header .profile-name {
    <style>
      #box-container {
        background: gray;
        display: flex;
        height: 500px;
        
      }
      #box-1 {
        background-color: dodgerblue;
        width: 200px;
        font-size: 24px;
      }
    
      #box-2 {
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      header, footer {
        display: flex;
        flex-direction: row;
      }
      header .profile-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 4px;
      }
      header .profile-name {
    <style>
      #box-container {
        background: gray;
        display: flex;
        height: 300px;
        
      }
      #box-1 {
        background-color: dodgerblue;
        width: 25%;
        height: 50%;
      }
    
      #box-2 {
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      #box-1 {
        background-color: dodgerblue;
        width: 100%;
        height: 200px;
        
      }
    
      #box-2 {
        background-color: orangered;
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      
      #box-1 {
        background-color: dodgerblue;
        height: 200px;
        flex-grow: 1;
      }
      
      #box-2 {
        background-color: orangered;
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      
      #box-1 {
        background-color: dodgerblue;
        height: 200px;
        
      }
      
      #box-2 {
        background-color: orangered;
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      #box-1 {
        background-color: dodgerblue;
        flex: 2 2 150px;
        height: 200px;
      }
    
      #box-2 {
        background-color: orangered;
        flex: 1 1 150px;
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      #box-1 {
        background-color: dodgerblue;
        order: 2;
        height: 200px;
        width: 200px;
      }
    
      #box-2 {
        background-color: orangered;
    <style>
      #box-container {
        display: flex;
        height: 500px;
      }
      #box-1 {
        background-color: dodgerblue;
        
        height: 200px;
        width: 200px;
      }
    
      #box-2 {
        background-color: orangered;