<div class="modal-title-area">
<div class="modal-name">
@{ ViewBag.Title = "Kişisel Bilgiler"; } @EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
@EmployeeCardRes.FirstName @EmployeeCardRes.LastName
<div class="text">@Model.FirstName @Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.PositionCode
<div class="text">@ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">@EmployeeCardRes.PositionCode
<div class="text">@ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
@EmployeeCardRes.PositionCode
</div>
<div class="text">
@ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}