html - 父 div 与子 div 一起显示

Question

我当前的输出看起来像这样。我试图弄清楚如何让“一般税务知识（compFamilyHierarchyName 类）在蓝色框旁边垂直运行，看起来像这样。

我得到的最接近的是将 display:flex 添加到 compFamilyHierarchyName，它看起来像这样- “一般税务知识”在正确的位置，但蓝色框现在在同一行，我不知道如何让他们回到彼此之上。

我感谢任何帮助或指示。谢谢！

.outerCompFamilyName{
	width:60px;
	background: #009CDE;
	position: relative;
	border-top: 1px solid white;
}

.innerCompFamilyName{
	color: white;
	position: absolute;
	bottom: 36%;
	left: -30%;
	transform: rotate(-90deg);
}

.whiteCDF {
	background: white;
	padding: 10px;
	border-bottom: 1px solid black; 
	border-right: 1px solid black; 
}

<div class="compFamilyHierarchyName">General Tax Knowledge
    <div style ="display:flex" class="FunctionalExpertise  Credits_Incentives_Methods column"> 
    	
    	<div class="outerCompFamilyName">
    	<div class="innerCompFamilyName" >Accounting Methods and Periods</div>
    	</div>
    	<div id="BuildingProfessionalNetworksTest16" style="width: 95%; background: slategrey;">
    		<div class="whiteCDF">Approaches and participates in all internal/external interactions with professionalism</div><div class="whiteCDF">Actively develops an internal/external network and relationships to grow one’s career, enhance business advisor status with clients, build the practice and serve clients; knows the right people in market/industry</div>
	</div>
    	</div> 
    </div>
    
    <div style ="display:flex" class="FunctionalExpertise  Credits_Incentives_Methods column"> 
    	<div class="outerCompFamilyName">
    	<div class="innerCompFamilyName" >Planning and Consulting</div>
    	</div>
    	<div id="BuildingProfessionalNetworksTest17" style="width: 95%; background: slategrey;">
    		<div class="whiteCDF">Approaches and participates in all internal/external interactions with professionalism</div><div class="whiteCDF">Actively develops an internal/external network and relationships to grow one’s career, enhance business advisor status with clients, build the practice and serve clients; knows the right people in market/industry</div>
	</div>
    	</div> 
    </div>
    </div>

对于上下文 -这是我们试图为网站重新创建的外观。这是以前宣传的材料/内部通信的一般组织，因此我们正在尽最大努力重新创建它以保持连续性。

标签： htmlcss