I have two halves side by side which is achieved using a float.

The height of the first half is defined by an image. 

The second half has some copy which needs to be aligned vertically and horizontally.

Here's what [CSS tricks](https://css-tricks.com/centering-css-complete-guide/) recommends from "Is the element of unknown width and height?": 

```css
.half {
  float: left;
  width: 50%;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

```html
<div class="half">
  <img src="https://images.unsplash.com/photo-1532517308734-0565178471d2" alt="Image from Unsplash">
</div>

<div class="half">

  <div class="parent">

    <div class="child">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div><!-- .child -->

  </div><!-- .parent -->

</div><!-- .half -->
```

This isn't working. Do both halves need an equal height and can this be achieved with JS or CSS?