How do I target the first div of a certain class name amongst other divs?

Question

I'm trying to change the border color of the first instance of the pricing component on a product page: a div of class .dynamic-price. This is what I have so far, and it is not working.

Here is the jsfiddle: (https://jsfiddle.net/kellyking/Lyqv1fzg/49/)

.dynamic-price {
  border: 1px solid darkblue;
  padding: 10px;
  margin: 5px 0;
}

.dynamic-price:first-of-type {
  border: 1px solid green;
}

<form class="product-details-form row">
  <div class="dynamic-description">
    description goes here
  </div>
  <div class="dynamic-price col__full">
    <div class="price-wrap">
      the first price component
    </div>
  </div>
  <div class="dynamic-financing">
    financing goes here
  </div>
  <div class="dynamic-price col__full">
    <div class="price-wrap">
      the second price component
    </div>
  </div>
  <div class="dynamic-add-to-cart">
    add to cart goes here
  </div>

I've tried using first-of-type and nth-of-type, and neither seem to be working for me.

This is the output I get from the above code: