Set the position of divs to the far ends

Question

I believe this question has been asked before, one way or another, but I am unable to get the expected results.

In a nutshell I have a grid of two columns, where one encloses a div with an image and another a div of just text. I have used transform scale to shrink the div of the image but I want to move that div to the far left or far right in order to make room for the text.

Online example: https://jsfiddle.net/rxh1m6kg/1/

How can I move the div of the image to the far left, and right, and increase the size of the text column?

Also, where is that extra space around the image div coming from?

 .wrapper
{
    border: 1px solid rgba(255,0,0,1.0);
  
    width: 90%;
    display: grid;
    grid-template-columns: auto auto;
    margin: auto auto;
}

.images
{
    border: 1px solid rgba(0,255,0,1.0);

    margin:       auto auto;
    margin-left:  10px;
    margin-right: 10px;
    transform: scale(0.5);
}

.images img
{
    display: block;
        /*top  right bottom left*/
    padding: 10px 10px  10px   10px;
    
    margin: auto auto;
    transform: rotate(5deg);
}

.article
{
    border: 1px solid rgba(0,0,255,1.0);
    margin-top:   0;
    margin-left:  10px;
    margin-right: 10px;
}

<div>

  <div class="wrapper">
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg" style="height: 150px;">
    </div>
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
  </div>

  <br>

  <div class="wrapper">
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg" style="height: 300px;">
    </div>
  </div>

</div>

Answer 1

You can simplify the styles dramatically. See my comments in the updated stylesheet below.

Also, try to avoid pixels and use rem/em units instead.

/* margin+border+padding part of width/height */
*, *::before, *::after {
  box-sizing: border-box;
}

.wrapper {
  display: flex; /* No need for grid, just flex */
}

.images img {
  transform: rotate(5deg);
  padding: 1rem;
  max-height: 10rem; /* Limit image height */
}

.article {
  flex: 1; /* Make text span the remaining width */
  padding: 0.25rem 0.5rem; /* Push text in */
}

.wrapper { border: 1px solid red;   }
.images  { border: 1px solid green; }
.article { border: 1px solid blue;  }

<div>
  <div class="wrapper">
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg">
    </div>
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
  </div>
  <br>
  <div class="wrapper">
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg">
    </div>
  </div>
</div>