Rotate text 90° with the resulting div having position within parent

When I rotate text (or rather a div containing text) this results in the div escaping it's parent. Not only that, but the height of the div is it's original width. I'd rather just stick with CSS to get the desired result rather than relying on javascript/jquery even though those tools are available since I'm using Bootstrap-4 How can I make sure a rotated div stays inside it's parent, and use's it's parents' width/height as it's basis for height/width because of being rotated 90° ?

THANKS!

.emptydropzone{
	height: 10vh;
	border: 1vh dashed #000; 
	border-radius: 1vh;
	background-color:  #CCC;
}

.taflag{
	width: 98%;
	min-height: 50px;
	margin: 10px 125px 10px 5px;
	padding: 10px 10px 10px 10px;
	border: 5px solid #90C;
	border-radius: 5px;
	background-color:  #90C;
	color: #FFF;
	font-size:xx-large;
	font-weight: bolder;
}

.rotateparent {
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: yellow; /* this is just to see the parent div in testing */
}

.agentflag{
	transform: rotate(-90deg);
	border: 5px solid #F00;
	border-radius: 5px;
	background-color:  #F00;
	color: #FFF;
	font-size:xx-large;
	font-weight: bolder;
	
	
	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="row">
				<div class="col-2">
                	 <div class="taflag"> TA </div>
				</div>
				<div class="col-10">
                	<div class="emptydropzone" id="ta" > </div>
				</div>
			</div>
			<div class="row">
				<div class="col-2">
                	 <div class="rotateparent">
                       <div class="agentflag"> AGENTS </div>
                     </div>
			 	</div>
				<div class="col-10">

	  <div class="emptydropzone" id="agent1"> </div>
	  <div class="emptydropzone" id="agent2"> </div>
	  <div class="emptydropzone" id="agent3"> </div>
	  <div class="emptydropzone" id="agent4"> </div>
                
				</div>
			</div>
		</div>
	</div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Solution

writing-mode might be much more efficient here .

possible update with less html and more boostrap classes

.emptydropzone {
  min-height: 10vh;
  border: 1vh dashed #000;
  border-radius: 1vh;
  background-color: #CCC;
}

.taflag {
  width: 98%;
  min-height: 50px;
  margin: 10px 125px 10px 5px;
  padding: 10px 10px 10px 10px;
  border: 5px solid #90C;
  border-radius: 5px;
  background-color: #90C;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}

.rotateparent {
  background: yellow;
  padding: 10px 0;
}

.agentflag {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
  /* untill 
  writing-mode:sideways-lr; works everywhere */
  margin: auto;
  border: 5px solid #F00;
  border-radius: 5px;
  background-color: #F00;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="row">
          <div class="col-2">
            <div class="taflag"> TA </div>
          </div>
          <div class="col-10">
            <div class="emptydropzone" id="ta"> </div>
          </div>
        </div>
        <div class="row">

          <div class="col-2 d-flex rotateparent m-0">
            <div class="agentflag m-auto"> AGENTS </div>
          </div>

          <div class="col-10 d-flex flex-column justify-content-around">

            <div class="emptydropzone" id="agent1"> </div>
            <div class="emptydropzone" id="agent2"> </div>
            <div class="emptydropzone" id="agent3"> </div>
            <div class="emptydropzone" id="agent4"> </div>

          </div>
        </div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>