JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shape">
        <div class="wrapper__shape">
            <div class="shape__photo"></div>
            <div class="shape__text" >1"</div>
            <div class="shape__photo"></div>
            <div class="shape__text" >f/16</div>
            <div class="shape__photo"></div>
            <div class="shape__text" >400</div>
            <div class="shape__photo"></div>
            <div class="shape__text" >Japan</div>
        </div>
    </div>

CSS

.wrapper__shape {
    display: flex;
    color: black;
    max-height: 16px;
}
.shape__text {
    margin-right: 16px;
}
.shape__photo {
  width: 16px;
  position: relative;
  bottom: -5px;
  background-color: gray;
}