hp

src/App/HP.css

@@ -38,4 +38,31 @@
     justify-content: center;
     max-width: 70%;
     max-height: 60%;
+  }
+
+  
+  #left-col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #ref-img {
+    width: 100%;
+    height: auto;
+  }
+
+
+  
+  .mitte {
+    
+    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
+  }
+  
+  .unten {
+    padding-bottom: 30px;
+    padding-left: 10px;
+  }
+  
+  .mitte-parent{
+    display: grid;
   }
\ No newline at end of file

src/components/Tabs.tsx

@@ -164,7 +164,21 @@ import Collapsible from "./Collapsible";
                     <div className="col" style={{padding: "5px"}}>{expert}</div>
                     <div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
                   </div>
-                  <div className="row">
+                  <div className="row align-items-stretch">
+                    <div className="col d-flex flex-column">
+                      <div className="row flex-grow-1 mitte">
+                      <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
+                      <p>{data[i].summary}</p>
+                      </div>
+                      <div className="row unten">
+                       hallo
+                      </div>
+                    </div>
+                    <div className="col-3">
+                      <img className="middle sechpro img-fluid" src={data[i].pictureurl} />
+                    </div>
+                  </div>
+                 {/*  <div className="row">
                     <div className="col">
                     <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
                     <p>{data[i].summary}</p>
@@ -172,7 +186,7 @@ import Collapsible from "./Collapsible";
                     <div className="col-3">
                       <img className="middle sechpro" src={data[i].pictureurl}/>
                     </div>
-                  </div>
+                  </div> */}
                   
                   <h4>{goalheading}</h4>
                   <div className="flexbox">