Javascript 如何使用只读文本框显示垂直图像？

目前我用下面的HTML水平显示图像。现在，我想添加一个只读文本框，沿着每个图像的侧面垂直放置

<div>
    <span>Uploaded Images</span>
    <div id="appendImages" class="img-section">
        <ul class="img-list" style="float:left">
            <li style="float:left; padding:5px; width:20%;" class="img-list-item" ng-repeat="img in wa.listOfWorkAssignmentDoc track by $index">
                <!--<button type="button" class="ion-close-round"
                        ng-click="removeImage(img)"></button>-->
                <!-- <img ng-src="{{ img.selectedImage }}" />-->
                <img ng-src="{{imgUrl}}{{img.documentId}}" width="100%" />
                <input type="text" />
            </li>

        </ul>

    </div>
</div>

上传的图像

在

li

样式属性中使用

display:flex

上传的图像




我会为每个图像沿着文本框获得垂直图像吗