diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
index b68802cd56ff9..ca090ee843e4f 100644
--- a/templates/repo/pulls/status.tmpl
+++ b/templates/repo/pulls/status.tmpl
@@ -18,14 +18,16 @@
 	{{end}}
 
 	{{range $.LatestCommitStatuses}}
-		<div class="ui attached segment">
-			<span>{{template "repo/commit_status" .}}</span>
-			<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span>
-			<div class="ui right">
-				{{if $.is_context_required}}
-					{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
-				{{end}}
-				<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
+		<div class="ui attached segment pr-status">
+			{{template "repo/commit_status" .}}
+			<div class="status-context">
+				<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
+				<div class="ui status-details">
+					{{if $.is_context_required}}
+						{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
+					{{end}}
+					<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
+				</div>
 			</div>
 		</div>
 	{{end}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 039c471309ff6..193a73c706e93 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3477,3 +3477,41 @@ td.blob-excerpt {
     max-width: 165px;
   }
 }
+
+.pr-status {
+  padding: 0 !important; // To clear fomantic's padding on .ui.segment elements
+  display: flex;
+  align-items: center;
+
+  .commit-status {
+    margin: 1em;
+    flex-shrink: 0;
+  }
+
+  .status-context {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    > span {
+      padding: 1em 0;
+    }
+  }
+
+  .status-details {
+    display: flex;
+    padding-right: .5em;
+    align-items: center;
+    justify-content: flex-end;
+
+    @media @mediaSm {
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+    }
+
+    > span {
+      padding-right: .5em; // To match the alignment with the "required" label
+    }
+  }
+}