Placing images next to boxes HTML/CSS

Question

I have been toying with this for about three weeks now and I have looked all over for what I am trying to portray and not getting results. I know it's so simple but I am just not having any luck!

I have a large box which spans the screen, I then have a white box inside this which has some text within it (which I am wondering if it is possible to have that expand as text is added rather than fixed width?) aligned to the left, I then have an image which I would like to float to the right and have the text box overlapping it at the center of the original outer box.

My issue is that the image is in the outer box, but I cannot get it to align with the text box and overlap underneath. Rather it just floats under the text box either at the right or center.

table { 
    height: 100%; 
    width: 100%; 
    background-color: #fff;
    font-family: 'Courier New', Courier, monospace;
}

td { 
  height: 100%; 
  width: 100%; 
  vertical-align: middle; 
  text-align: right;
  background-color: #f4d442;
  font-family: 'Courier New', Courier, monospace;
}

.boxed{
  width: 50vw;
  height: 70vh; 
  box-align: left;
  text-align: justify;
  padding: 5%;
  background-color:  #fff;
  margin: 5%;
  margin-left: 5%; 
}

  .container-wrapper{
    text-align:center;
  }

<table><tr><td>

 <div class="container-wrapper">
  <div class="boxed">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div>
<div class="image">
<img src="https://via.placeholder.com/300x200">
</td></tr></table>
</div>
</div>

I have tried for weeks to get my head around this and having no luck, thanks for any light you can shine! This is the first website I have fully made so constructive critisism is welcomed.

Answer 1

One solution might be to try using flex box:

.container-wrapper {
  background-color: #f4d442;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  align-items: center;
}

.image {
  margin: 20px;
}

.boxed {
  text-align: justify;
  padding: 20px;
  margin: 20px;
  background-color: #fff;
}

<div class="container-wrapper">
  <div class="boxed">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
    Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
    vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
    ante ac lectus.
  </div>
  <div class="image">
    <img src=".\images\placeholder.jpg">
  </div>
</div>

Answer 2

table { 
    height: 100%; 
    width: 100%; 
    background-color: #fff;
    font-family: 'Courier New', Courier, monospace;
}

td { 
  height: 100%; 
  width: 100%; 
  vertical-align: middle; 
  text-align: right;
  background-color: #f4d442;
  font-family: 'Courier New', Courier, monospace;
}

.boxed{
  width: 50vw;
  height: auto; 
  box-align: left;
  text-align: justify;
  padding: 5%;
  background-color:  #fff;
  margin: 5%;
  margin-left: 5%; 
}

  .container-wrapper{
    text-align:center;
  }

<table><tr><td>

 <div class="container-wrapper">
  <div class="boxed">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div>
<div class="image">
<img src=".\images\placeholder.jpg">
</td></tr></table>
</div>
</div>

I just changed the height to auto, since I thought you meant height when you said width, it should work the same with width though. I can not help you with your picture. Please include one example picture from the web to your code, so it is easier to help you