JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container-fluid p-4" ng-app="app1" ng-controller="ctrl1">
  <div class="form-row mb-2">
    <div class="col-2">
      <label>Renk Kodu:</label>
    </div>
    <div class="col-10">
      <select class="form-control" id="RenkKodu" name="RenkKodu" ng-model="renk" ng-options="renk as renk.kod for renk in renkler">
      </select>
    </div>
  </div>
    <div class="form-row mb-2">
    <div class="col-2">
      <label>Renk Adı:</label>
    </div>
    <div class="col-10">
      <input type="text" class="form-control" ng-model="renk.ad" readonly />
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var app = angular
    .module('app1', [])
    .controller('ctrl1', ($scope) => {
    
    $scope.renkler = [
       { id: 1, kod: 'RNK1', ad : 'Haki' },
       { id: 2, kod: 'RNK2', ad : 'Bordo' },
       { id: 3, kod: 'RNK3', ad : 'Füme' },
       { id: 4, kod: 'RNK4', ad : 'Turkuaz' } 
    ];
    
    });