CSS - percentage values cause problems with flexbox

How the snippet of the website looks rn, and the problem of it

To explain my issue

I am building a project about Poems, and I want to add a biography section. However I am facing multiple problems and I don't find a solution for it. I am unsure on how to solve the problem, I tried googling it but either I am unable to articulate myself properly or my code is so outlandishly wrong that noone else ran into the Problem before.

below I will add the HTML and CSS code. I appreciate every feedback and it would mean a lot to me if you could help a newbie out :) It just seems to difficult to get the hang of CSS, maybe because it is so responsive.

Furthermore, I don't yet know how to build responsive design, but if I assume correctly what I am trying to do falls under this "category"

My Problems:

1. I want to assign the text of the 2nd biography div to the left of the box, but as seen in the picture it clips to the right.
2. I want to add a small border/padding around the text box, but this does not seem to work either
3. I didn't find a workaround on the percentage value, as this weird thing happens with percentage: screenshot of what I mean
4. (Edit) in the first text-div you can see, that the text does this weird "clipping" of cutting off after a few characters, I suppose this has to do with the same thing as shown in the screenshot of Question 3. That or me using
   

Can someone help me solve this? x) I feel like giving up

HTML:

 <div class="bio-section">

       <div class="bio">
  
            <div class="pic">
               <img id="ok" src="https://www.thefamouspeople.com/profiles/images/omar-khayyam-5.jpg" alt="Omar Khayyam">
  
             </div>  
  
            <div="biotext">
            SAMPLE
  
            </div>
  
      </div>

                <div class="bio2">
  
                      <div class="pic">
                        <a href="#">Pic</a>
  
                      </div>  
  
                      <div="biotext2">
                        <p>Hi, this is a sample text of Author X</p>
  
                      </div>
  
              </div>

      <div class="bio">
  
            <div class="pic">
              Pic
  
             </div>  
  
            <div="biotext">
            Bio
  
            </div>
  
      </div>

CSS:

    .bio-section{
      display:flex;
      height:auto 630px;
      width:100%;
      flex-direction: column;
      justify-content:flex-start;  
    }
    .bio{
      display:flex; 
      border-style:solid; 
      height:210px; 
      Justify-items:flex-start;
      margin-bottom:10px;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .pic{
      border-style:dotted;
      border-color:green;
      width: 20%;
      height:200px;
    }
    .biotext{
      border-style:dotted;
      border-color:blue;
      width:75%;
      height:200px;
      max-width:75%;
      margin-left:10px;
      border:10px;
    }
    
    .bio2{
      display:flex; 
      border-style:solid; 
      height:210px;  
      justify-items:flex-start;
      flex-direction:row-reverse;
      margin-bottom:10px;
      background-color: rgba(255, 255, 255, 0.5);
    }

.biotext2{
  display:flex;
  justify-content:flex-start;
  width:75%;
  height:200px;
}