父div与子div一起显示

Question

我当前的输出看起来像https://nameserver.com/~user/。我试图弄清楚如何让＆＃34;一般税务知识（compFamilyHierarchyName类）在蓝色框旁边垂直运行，并像this一样。

我最接近的是将display：flex添加到compFamilyHierarchyName，看起来像this - ＆＃34;一般税务知识＆＃34;是在正确的地方，但蓝色的盒子现在在同一条线上，我无法弄清楚如何让它们回到彼此之上。

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

＆＃13;

＆＃13;

.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; 
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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